@cdc/map 4.25.7 → 4.25.10

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

@@ -8,6 +8,7 @@ import {
 } from 'react-accessible-accordion'
 import ConfigContext from '../../../context'
 import _ from 'lodash'
+import { cloneConfig } from '@cdc/core/helpers/cloneConfig'
 
 const shapeOptions = ['Arrow Up', 'Arrow Down', 'Arrow Right', 'Arrow Left', 'None']
 
@@ -105,7 +106,7 @@ const HexSettingShapeColumns = props => {
                               type='text'
                               value={shapeGroup.legendTitle || ''}
                               onChange={e => {
-                                const newConfig = _.cloneDeep(config)
+                                const newConfig = cloneConfig(config)
                                 newConfig.hexMap.shapeGroups[shapeGroupIndex].legendTitle = e.target.value
                                 setConfig(newConfig)
                               }}
@@ -243,7 +244,7 @@ const HexSettingShapeColumns = props => {
                               className='cove-button'
                               style={{ marginTop: '15px' }}
                               onClick={() => {
-                                const newConfig = _.cloneDeep(config)
+                                const newConfig = cloneConfig(config)
                                 _.set(
                                   newConfig,
                                   'hexMap.shapeGroups',

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

@@ -7,6 +7,7 @@ import {
   AccordionItemButton
 } from 'react-accessible-accordion'
 import ConfigContext from '../../../../context'
+import { useLegendMemoContext } from '../../../../context/LegendMemoContext'
 import { type MapContext } from '../../../../types/MapContext'
 import Button from '@cdc/core/components/elements/Button'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
@@ -14,6 +15,7 @@ import Icon from '@cdc/core/components/ui/Icon'
 import './Panel.PatternSettings-style.css'
 import Alert from '@cdc/core/components/Alert'
 import _ from 'lodash'
+import { cloneConfig } from '@cdc/core/helpers/cloneConfig'
 
 // topojson helpers for checking color contrasts
 import { feature } from 'topojson-client'
@@ -26,8 +28,8 @@ type PanelProps = {
 }
 
 const PatternSettings = ({ name }: PanelProps) => {
-  const { config, setConfig, runtimeData, legendMemo, legendSpecialClassLastMemo, runtimeLegend } =
-    useContext<MapContext>(ConfigContext)
+  const { config, setConfig, runtimeData, runtimeLegend } = useContext<MapContext>(ConfigContext)
+  const { legendMemo, legendSpecialClassLastMemo } = useLegendMemoContext()
   const defaultPattern = 'circles'
   const patternTypes = ['circles', 'waves', 'lines']
 
@@ -114,14 +116,14 @@ const PatternSettings = ({ name }: PanelProps) => {
   }
 
   const handlePatternFieldUpdate = (field: string, color: string, patternIndex: number) => {
-    const _newConfig = _.cloneDeep(config)
+    const _newConfig = cloneConfig(config)
     _newConfig.map.patterns[patternIndex][field] = color
     reviewColorContrast(_newConfig, patternIndex)
     setConfig(_newConfig)
   }
 
   const handleRemovePattern = index => {
-    const _newConfig = _.cloneDeep(config)
+    const _newConfig = cloneConfig(config)
     const updatedPatterns = config.map.patterns.filter((pattern, i) => i !== index)
     _newConfig.map.patterns = updatedPatterns
     if (checkPatternContrasts()) {
@@ -161,7 +163,7 @@ const PatternSettings = ({ name }: PanelProps) => {
         {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.'
+            message='Pattern colors must comply with <a href="https://www.w3.org/TR/WCAG21/">WCAG 2.1</a> 3:1 contrast ratio.'
           />
         )}
         <br />

package/src/components/Geo.tsx

@@ -6,6 +6,8 @@ type GeoProps = {
   strokeWidth?: number
   path?: string
   className?: string
+  onMouseEnter?: () => void
+  onClick?: () => void
 }
 
 const Geo: React.FC<GeoProps> = ({ path, styles, stroke, strokeWidth, ...props }) => {

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

@@ -1,6 +1,7 @@
 //TODO: Move legends to core
-import { forwardRef, useContext } from 'react'
+import { forwardRef, useContext, useMemo } from 'react'
 import parse from 'html-react-parser'
+import { processMarkupVariables } from '@cdc/core/helpers/markupProcessor'
 
 //types
 import { DimensionsType } from '@cdc/core/types/Dimensions'
@@ -18,12 +19,14 @@ import { GlyphStar, GlyphTriangle, GlyphDiamond, GlyphSquare, GlyphCircle } from
 import { Group } from '@visx/group'
 import './index.scss'
 import { type ViewPort } from '@cdc/core/types/ViewPort'
-import { isBelowBreakpoint, isMobileHeightViewport } from '@cdc/core/helpers/viewports'
+import { isBelowBreakpoint, isMobileFontViewport } from '@cdc/core/helpers/viewports'
 import { displayDataAsText } from '@cdc/core/helpers/displayDataAsText'
-import { toggleLegendActive } from '@cdc/map/src/helpers/toggleLegendActive'
+import { toggleLegendActive } from '../../../helpers/toggleLegendActive'
 import { resetLegendToggles } from '../../../helpers'
 import { MapContext } from '../../../types/MapContext'
 import LegendGroup from './LegendGroup/Legend.Group'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 const LEGEND_PADDING = 30
 
@@ -32,10 +35,11 @@ type LegendProps = {
   dimensions: DimensionsType
   containerWidthPadding: number
   currentViewport: ViewPort
+  interactionLabel: string
 }
 
 const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
-  const { skipId, containerWidthPadding } = props
+  const { skipId, containerWidthPadding, interactionLabel } = props
 
   const {
     config,
@@ -43,8 +47,7 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
     dimensions,
     mapId,
     runtimeFilters,
-    runtimeLegend,
-    setRuntimeLegend
+    runtimeLegend
   } = useContext<MapContext>(ConfigContext)
 
   const dispatch = useContext(MapDispatchContext)
@@ -59,7 +62,10 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
 
   const getFormattedLegendItems = () => {
     try {
-      if (!runtimeLegend.items) Error('No runtime legend data')
+      if (!runtimeLegend.items) {
+        console.warn('No runtime legend data available')
+        return []
+      }
       return runtimeLegend.items.map((entry, idx) => {
         const entryMax = displayDataAsText(entry.max, 'primary', config)
 
@@ -94,8 +100,7 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
           label: parse(legendLabel),
           disabled: entry.disabled,
           special: entry.hasOwnProperty('special'),
-          value: legend.type === 'category' ? entry.value : [entry.min, entry.max],
-          categoryValue: legend.type === 'category' ? entry.value : undefined
+          value: [entry.min, entry.max]
         }
       })
     } catch (e) {
@@ -106,7 +111,7 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
 
   const legendList = (patternsOnly = false) => {
     const formattedItems = patternsOnly ? [] : getFormattedLegendItems()
-    const patternsOnlyFont = isMobileHeightViewport(viewport) ? '12px' : '14px'
+    const patternsOnlyFont = isMobileFontViewport(viewport) ? '12px' : '14px'
     const hasDisabledItems = formattedItems.some(item => item.disabled)
     let legendItems
 
@@ -119,48 +124,36 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
         return classes.join(' ')
       }
 
-      const setAccessibleStatus = (message: string) => {
-        dispatch({ type: 'SET_ACCESSIBLE_STATUS', payload: message })
-      }
-
-      // Find the correct runtime index for toggling
-      // This is needed because special classes may have been moved to the end
-      const findRuntimeIndex = () => {
-        if (!runtimeLegend.items) return idx
-
-        return runtimeLegend.items.findIndex(runtimeItem => {
-          if (item.special && runtimeItem.special) {
-            // For special classes, match by label (since formatted item label comes from runtime item)
-            const runtimeLabel = runtimeItem.label || runtimeItem.value
-            const itemLabel = typeof item.label === 'string' ? item.label : item.label?.props?.children || item.label
-            return runtimeLabel === itemLabel
-          } else if (!item.special && !runtimeItem.special) {
-            // For categorical/qualitative items, match by single value
-            if (config.legend.type === 'category' && item.categoryValue !== undefined) {
-              return runtimeItem.value === item.categoryValue
-            }
-            // For numeric items, match by min/max values
-            return runtimeItem.min === item.value?.[0] && runtimeItem.max === item.value?.[1]
-          }
-          return false
-        })
-      }
-
-      const runtimeIndex = findRuntimeIndex()
-      const safeRuntimeIndex = runtimeIndex >= 0 ? runtimeIndex : idx
-
       return (
         <li
           className={handleListItemClass()}
           key={idx}
           title={`Legend item ${item.label} - Click to disable`}
-          onClick={() =>
-            toggleLegendActive(safeRuntimeIndex, item.label, runtimeLegend, setRuntimeLegend, setAccessibleStatus)
-          }
+          onClick={() => {
+            toggleLegendActive(idx, item.label, runtimeLegend, dispatch)
+            publishAnalyticsEvent({
+              vizType: config.type,
+              vizSubType: getVizSubType(config),
+              eventType: `map_legend_item_toggled`,
+              eventAction: 'click',
+              eventLabel: `${interactionLabel}`,
+              vizTitle: getVizTitle(config),
+              specifics: `mode: isolate, label: ${item.label}`
+            })
+          }}
           onKeyDown={e => {
             if (e.key === 'Enter') {
               e.preventDefault()
-              toggleLegendActive(safeRuntimeIndex, item.label, runtimeLegend, setRuntimeLegend, setAccessibleStatus)
+              toggleLegendActive(idx, item.label, runtimeLegend, dispatch)
+              publishAnalyticsEvent({
+                vizType: config.type,
+                vizSubType: getVizSubType(config),
+                eventType: `map_legend_item_toggled`,
+                eventAction: 'keydown',
+                eventLabel: `${interactionLabel}`,
+                vizTitle: getVizTitle(config),
+                specifics: `mode: isolate, label: ${item.label}`
+              })
             }
           }}
           tabIndex={0}
@@ -178,9 +171,9 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
         const { pattern, dataKey, size } = patternData
         let defaultPatternColor = 'black'
         const sizes = {
-          small: '8',
-          medium: '10',
-          large: '12'
+          small: 8,
+          medium: 10,
+          large: 12
         }
 
         const legendSize = 16
@@ -253,7 +246,15 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
     if (e) {
       e.preventDefault()
     }
-    resetLegendToggles(runtimeLegend, setRuntimeLegend)
+    publishAnalyticsEvent({
+      vizType: config.type,
+      vizSubType: getVizSubType(config),
+      eventType: 'map_legend_reset',
+      eventAction: 'click',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(config)
+    })
+    resetLegendToggles(runtimeLegend, dispatch)
     dispatch({
       type: 'SET_ACCESSIBLE_STATUS',
       payload: 'Legend has been reset, please reference the data table to see updated values.'
@@ -273,14 +274,17 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
     />
   )
 
-  const cityStyleShapes = {
-    pin: pin,
-    circle: <GlyphCircle color='#000' size={150} />,
-    square: <GlyphSquare color='#000' size={150} />,
-    diamond: <GlyphDiamond color='#000' size={150} />,
-    star: <GlyphStar color='#000' size={150} />,
-    triangle: <GlyphTriangle color='#000' size={150} />
-  }
+  const cityStyleShapes = useMemo(
+    () => ({
+      pin: pin,
+      circle: <GlyphCircle color='#000' size={150} />,
+      square: <GlyphSquare color='#000' size={150} />,
+      diamond: <GlyphDiamond color='#000' size={150} />,
+      star: <GlyphStar color='#000' size={150} />,
+      triangle: <GlyphTriangle color='#000' size={150} />
+    }),
+    [pin]
+  )
 
   const shouldRenderLegendList = legendListItems.length > 0 && ['Select Option', ''].includes(config.legend.groupBy)
 
@@ -298,9 +302,29 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
           <section className={legendClasses.section.join(' ') || ''} aria-label='Map Legend'>
             {(legend.title || legend.description || legend.dynamicDescription) && (
               <div className='mb-3'>
-                {legend.title && <h3 className={legendClasses.title.join(' ') || ''}>{parse(legend.title)}</h3>}
+                {legend.title && (
+                  <h3 className={legendClasses.title.join(' ') || ''}>
+                    {parse(
+                      config.enableMarkupVariables && config.markupVariables?.length > 0
+                        ? processMarkupVariables(legend.title, config.data || [], config.markupVariables, {
+                            isEditor: false,
+                            filters: config.filters || []
+                          }).processedContent
+                        : legend.title
+                    )}
+                  </h3>
+                )}
                 {legend.dynamicDescription === false && legend.description && (
-                  <p className={legendClasses.description.join(' ') || ''}>{parse(legend.description)}</p>
+                  <p className={legendClasses.description.join(' ') || ''}>
+                    {parse(
+                      config.enableMarkupVariables && config.markupVariables?.length > 0
+                        ? processMarkupVariables(legend.description, config.data || [], config.markupVariables, {
+                            isEditor: false,
+                            filters: config.filters || []
+                          }).processedContent
+                        : legend.description
+                    )}
+                  </p>
                 )}
                 {legend.dynamicDescription === true &&
                   runtimeFilters.map((filter, idx) => {
@@ -343,41 +367,41 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
 
             {((config.visual.additionalCityStyles && config.visual.additionalCityStyles.some(c => c.label)) ||
               config.visual.cityStyleLabel) && (
-              <>
-                <hr />
-                <div className={legendClasses.div.join(' ') || ''}>
-                  {config.visual.cityStyleLabel && (
-                    <div>
-                      <svg>
-                        <Group
-                          top={
-                            config.visual.cityStyle === 'pin' ? 19 : config.visual.cityStyle === 'triangle' ? 13 : 11
-                          }
-                          left={10}
-                        >
-                          {cityStyleShapes[config.visual.cityStyle.toLowerCase()]}
-                        </Group>
-                      </svg>
-                      <p>{config.visual.cityStyleLabel}</p>
-                    </div>
-                  )}
-
-                  {config.visual.additionalCityStyles.map(
-                    ({ shape, label }) =>
-                      label && (
-                        <div>
-                          <svg>
-                            <Group top={shape === 'Pin' ? 19 : shape === 'Triangle' ? 13 : 11} left={10}>
-                              {cityStyleShapes[shape.toLowerCase()]}
-                            </Group>
-                          </svg>
-                          <p>{label}</p>
-                        </div>
-                      )
-                  )}
-                </div>
-              </>
-            )}
+                <>
+                  <hr />
+                  <div className={legendClasses.div.join(' ') || ''}>
+                    {config.visual.cityStyleLabel && (
+                      <div>
+                        <svg>
+                          <Group
+                            top={
+                              config.visual.cityStyle === 'pin' ? 19 : config.visual.cityStyle === 'triangle' ? 13 : 11
+                            }
+                            left={10}
+                          >
+                            {cityStyleShapes[config.visual.cityStyle.toLowerCase()]}
+                          </Group>
+                        </svg>
+                        <p>{config.visual.cityStyleLabel}</p>
+                      </div>
+                    )}
+
+                    {config.visual.additionalCityStyles.map(
+                      ({ shape, label }, index) =>
+                        label && (
+                          <div key={`additional-city-style-${index}-${shape}`}>
+                            <svg>
+                              <Group top={shape === 'Pin' ? 19 : shape === 'Triangle' ? 13 : 11} left={10}>
+                                {cityStyleShapes[shape.toLowerCase()]}
+                              </Group>
+                            </svg>
+                            <p>{label}</p>
+                          </div>
+                        )
+                    )}
+                  </div>
+                </>
+              )}
             {runtimeLegend.disabledAmt > 0 && (
               <Button className={legendClasses.showAllButton.join(' ')} onClick={handleReset}>
                 Show All

package/src/components/Legend/components/LegendGroup/Legend.Group.tsx

@@ -1,7 +1,7 @@
 import { useContext, useMemo } from 'react'
 import './legend.group.css'
 import LegendShape from '@cdc/core/components/LegendShape'
-import { toggleLegendActive } from '@cdc/map/src/helpers/toggleLegendActive'
+import { toggleLegendActive } from '../../../../helpers/toggleLegendActive'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import ConfigContext, { MapDispatchContext } from '../../../../context'
 
@@ -17,7 +17,7 @@ interface GroupedData {
 }
 
 const LegendGroup = ({ legendItems }) => {
-  const { runtimeLegend, setRuntimeLegend, config } = useContext(ConfigContext)
+  const { runtimeLegend, config } = useContext(ConfigContext)
   const dispatch = useContext(MapDispatchContext)
   const groupLegendItems = (items: LegendItem[], data: object[], groupByKey: string): GroupedData => {
     if (!groupByKey || !data || !items) return {}
@@ -59,10 +59,13 @@ const LegendGroup = ({ legendItems }) => {
     const wasDisabled = runtimeLegend.items.find(i => i.value === item.label)?.disabled
     const delta = wasDisabled ? -1 : 1
 
-    setRuntimeLegend({
-      ...runtimeLegend,
-      items: newItems,
-      disabledAmt: (runtimeLegend.disabledAmt ?? 0) + delta
+    dispatch({
+      type: 'SET_RUNTIME_LEGEND',
+      payload: {
+        ...runtimeLegend,
+        items: newItems,
+        disabledAmt: (runtimeLegend.disabledAmt ?? 0) + delta
+      }
     })
     const message = `${wasDisabled ? 'Enabled' : 'Disabled'} legend item ${
       item.label
@@ -109,7 +112,7 @@ const LegendGroup = ({ legendItems }) => {
                   onKeyDown={e => {
                     if (e.key === 'Enter' || e.key === ' ') {
                       e.preventDefault()
-                      toggleLegendActive(index, item.label, runtimeLegend, setRuntimeLegend, setAccessibleStatus)
+                      toggleLegendActive(index, item.label, runtimeLegend, dispatch)
                     }
                   }}
                 >

package/src/components/MapContainer.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import Modal from './Modal'
+import UsaMap from './UsaMap'
+import WorldMap from './WorldMap'
+import GoogleMap from './GoogleMap'
+import { MapConfig } from '../types/MapConfig'
+import { LOGO_MAX_WIDTH } from '../helpers/constants'
+
+interface MapContainerProps {
+  config: MapConfig
+  modal: any
+  currentViewport: string
+  geoType: string
+  general: any
+  logo: string
+  mapSvgRef: React.RefObject<HTMLElement>
+}
+
+const MapContainer: React.FC<MapContainerProps> = ({
+  config,
+  modal,
+  currentViewport,
+  geoType,
+  general,
+  logo,
+  mapSvgRef
+}) => {
+  return (
+    <section className='outline-none geography-container w-100 position-relative' ref={mapSvgRef} tabIndex={0}>
+      {currentViewport && (
+        <>
+          {modal && <Modal />}
+          {'single-state' === geoType && <UsaMap.SingleState />}
+          {'us' === geoType && 'us-geocode' !== config.general.type && <UsaMap.State />}
+          {'us-region' === geoType && <UsaMap.Region />}
+          {'us-county' === geoType && <UsaMap.County />}
+          {'world' === geoType && <WorldMap />}
+          {'google-map' === geoType && <GoogleMap />}
+          {
+            /* logo is handled in UsaMap.State when applicable */
+            // prettier-ignore
+            'data' === general.type && logo && ('us' !== geoType || 'us-geocode' === general.type) && (
+              <img src={logo} alt='' className='map-logo' style={{ maxWidth: LOGO_MAX_WIDTH }} />
+            )
+          }
+        </>
+      )}
+    </section>
+  )
+}
+
+export default MapContainer

package/src/components/MapControls.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import MediaControls from '@cdc/core/components/MediaControls'
+import { MapConfig } from '../types/MapConfig'
+
+interface MapControlsProps {
+  config: MapConfig
+  imageId: string
+  interactionLabel: string
+}
+
+const MapControls: React.FC<MapControlsProps> = ({ config, imageId, interactionLabel }) => {
+  const { showDownloadImgButton, showDownloadPdfButton } = config.general
+
+  if (!showDownloadImgButton && !showDownloadPdfButton) {
+    return null
+  }
+
+  return (
+    <MediaControls.Section classes={['download-buttons']}>
+      {showDownloadImgButton && (
+        <MediaControls.Button
+          text='Download Image'
+          title='Download Chart as Image'
+          type='image'
+          state={config}
+          elementToCapture={imageId}
+          interactionLabel={interactionLabel}
+        />
+      )}
+      {showDownloadPdfButton && (
+        <MediaControls.Button
+          text='Download PDF'
+          title='Download Chart as PDF'
+          type='pdf'
+          state={config}
+          interactionLabel={interactionLabel}
+          elementToCapture={imageId}
+        />
+      )}
+    </MediaControls.Section>
+  )
+}
+
+export default MapControls

package/src/components/Modal.tsx

@@ -5,19 +5,13 @@ import useApplyTooltipsToGeo from '../hooks/useApplyTooltipsToGeo'
 import { MapContext } from '../types/MapContext'
 
 const Modal = () => {
-  const { content, config, currentViewport: viewport } = useContext<MapContext>(ConfigContext)
-  const { capitalizeLabels } = config.tooltips
+  const { content, currentViewport: viewport } = useContext<MapContext>(ConfigContext)
   const { applyTooltipsToGeo } = useApplyTooltipsToGeo()
   const tooltip = applyTooltipsToGeo(content.geoName, content.keyedData, 'jsx')
   const dispatch = useContext(MapDispatchContext)
 
   return (
-    <section
-      className={
-        capitalizeLabels ? 'modal-content tooltip capitalize ' + viewport : 'modal-content tooltip ' + viewport
-      }
-      aria-hidden='true'
-    >
+    <section className={'modal-content tooltip ' + viewport} aria-hidden='true'>
       <div className='content'>{tooltip}</div>
       <Icon
         display='close'

package/src/components/NavigationMenu.tsx

@@ -1,8 +1,10 @@
 import React, { useContext, useEffect, useState } from 'react'
 import ConfigContext from '../context'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 const NavigationMenu = ({ data, navigationHandler, options, columns, displayGeoName, mapTabbingID }) => {
-  const { state } = useContext(ConfigContext)
+  const { interactionLabel, config } = useContext(ConfigContext)
   const [activeGeo, setActiveGeo] = useState('')
   const [dropdownItems, setDropdownItems] = useState({})
 
@@ -11,6 +13,16 @@ const NavigationMenu = ({ data, navigationHandler, options, columns, displayGeoN
     if (activeGeo !== '') {
       const urlString = data[dropdownItems[activeGeo]][columns.navigate.name]
 
+      publishAnalyticsEvent({
+        vizType: config.type,
+        vizSubType: getVizSubType(config),
+        eventType: `map_navigation_menu`,
+        eventAction: 'submit',
+        eventLabel: `${interactionLabel}`,
+        vizTitle: getVizTitle(config),
+        specifics: `url: ${urlString}, activeGeo: ${activeGeo}`
+      })
+
       navigationHandler(urlString)
     }
   }