@cdc/map 4.24.3 → 4.24.4

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

@@ -0,0 +1,12 @@
+const Error = ({ state }) => {
+  return (
+    <section className='waiting'>
+      <section className='waiting-container'>
+        <h3>Error With Configuration</h3>
+        <p>{state.runtime.editorErrorMessage}</p>
+      </section>
+    </section>
+  )
+}
+
+export default Error

package/src/components/EditorPanel/components/Panel.PatternSettings-style.css

@@ -0,0 +1,5 @@
+.cdc-open-viz-module {
+  .pattern-input__color {
+    margin-top: 1rem;
+  }
+}

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

@@ -3,6 +3,9 @@ import { Accordion, AccordionItem, AccordionItemHeading, AccordionItemPanel, Acc
 import ConfigContext from '../../../context'
 import { type MapContext } from '../../../types/MapContext'
 import Button from '@cdc/core/components/elements/Button'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import Icon from '@cdc/core/components/ui/Icon'
+import './Panel.PatternSettings-style.css'
 
 type PanelProps = {
   name: string
@@ -32,7 +35,7 @@ const PatternSettings = ({ name }: PanelProps) => {
   }
 
   /** Updates the map pattern at a given index */
-  const handleUpdateGeoPattern = (value: string, index: number, keyToUpdate: 'dataKey' | 'pattern' | 'dataValue' | 'size' | 'label') => {
+  const handleUpdateGeoPattern = (value: string, index: number, keyToUpdate: 'dataKey' | 'pattern' | 'dataValue' | 'size' | 'label' | 'color') => {
     const updatedPatterns = [...state.map.patterns]
     updatedPatterns[index] = { ...updatedPatterns[index], [keyToUpdate]: value }
 
@@ -120,6 +123,20 @@ const PatternSettings = ({ name }: PanelProps) => {
                           </option>
                         ))}
                       </select>
+                      <div className='pattern-input__color'>
+                        <label htmlFor='patternColor'>
+                          Pattern Color
+                          <Tooltip style={{ textTransform: 'none' }}>
+                            <Tooltip.Target>
+                              <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')} />
+                        </label>
+                      </div>
                       <Button onClick={e => handleRemovePattern(patternIndex)} className='btn btn--remove warn'>
                         Remove Pattern
                       </Button>

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

@@ -14,7 +14,13 @@ import { GlyphStar, GlyphTriangle, GlyphDiamond, GlyphSquare, GlyphCircle } from
 import { Group } from '@visx/group'
 import './index.scss'
 
+type LegendProps = {
+  skipId: string
+}
+
 const Legend = forwardRef((props, ref) => {
+  const { skipId } = props
+
   // prettier-ignore
   const {
     displayDataAsText,
@@ -28,6 +34,7 @@ const Legend = forwardRef((props, ref) => {
   } = useContext(ConfigContext)
 
   const { legend } = state
+  const fontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? { fontSize: '11px' } : null
 
   // Toggles if a legend is active and being applied to the map and data table.
   const toggleLegendActive = (i, legendLabel) => {
@@ -89,6 +96,7 @@ const Legend = forwardRef((props, ref) => {
       return (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
         <li
+          style={fontSize}
           className={handleListItemClass().join(' ')}
           key={idx}
           title={`Legend item ${legendLabel} - Click to disable`}
@@ -101,10 +109,9 @@ const Legend = forwardRef((props, ref) => {
               toggleLegendActive(idx, legendLabel)
             }
           }}
-          role='button'
           tabIndex={0}
         >
-          <LegendCircle fill={entry.color} /> <span>{legendLabel}</span>
+          <LegendCircle viewport={viewport} fill={entry.color} /> <span>{legendLabel}</span>
         </li>
       )
     })
@@ -171,10 +178,14 @@ const Legend = forwardRef((props, ref) => {
   return (
     <ErrorBoundary component='Sidebar'>
       <div className='legends'>
-        <aside id='legend' className={legendClasses.aside.join(' ') || ''} role='region' aria-label='Legend' tabIndex={0} ref={ref}>
+        <aside id={skipId || 'legend'} className={legendClasses.aside.join(' ') || ''} role='region' aria-label='Legend' tabIndex={0} ref={ref}>
           <section className={legendClasses.section.join(' ') || ''} aria-label='Map Legend'>
-            {legend.title && <span className={legendClasses.title.join(' ') || ''}>{parse(legend.title)}</span>}
-            {legend.dynamicDescription === false && legend.description && <p className={legendClasses.description.join(' ') || ''}>{parse(legend.description)}</p>}
+            {legend.title && <h3 className={legendClasses.title.join(' ') || ''}>{parse(legend.title)}</h3>}
+            {legend.dynamicDescription === false && legend.description && (
+              <p style={fontSize} className={legendClasses.description.join(' ') || ''}>
+                {parse(legend.description)}
+              </p>
+            )}
             {legend.dynamicDescription === true &&
               runtimeFilters.map((filter, idx) => {
                 const lookupStr = `${idx},${filter.values.indexOf(String(filter.active))}`
@@ -184,7 +195,7 @@ const Legend = forwardRef((props, ref) => {
 
                 if (desc.length > 0) {
                   return (
-                    <p key={`dynamic-description-${lookupStr}`} className={`dynamic-legend-description-${lookupStr}`}>
+                    <p style={fontSize} key={`dynamic-description-${lookupStr}`} className={`dynamic-legend-description-${lookupStr}`}>
                       {desc}
                     </p>
                   )
@@ -218,7 +229,7 @@ const Legend = forwardRef((props, ref) => {
                               {cityStyleShapes[shape.toLowerCase()]}
                             </Group>
                           </svg>
-                          <p>{label}</p>
+                          <p style={fontSize}>{label}</p>
                         </div>
                       )
                   )}

package/src/components/Legend/components/LegendItem.Hex.tsx

@@ -27,7 +27,7 @@ const LegendItemHex = props => {
       return (
         <aside id='legend' className={legendClasses.aside.join(' ')} role='region' aria-label='Legend' tabIndex={0}>
           <section className={legendClasses.section.join(' ')} aria-label='Map Legend'>
-            {shapeGroup.legendTitle && <span className={legendClasses.title.join(' ')}>{parse(shapeGroup.legendTitle)}</span>}
+            {shapeGroup.legendTitle && <h3 className={legendClasses.title.join(' ')}>{parse(shapeGroup.legendTitle)}</h3>}
             {shapeGroup.legendDescription && <p className={legendClasses.description.join(' ')}>{parse(shapeGroup.legendDescription)}</p>}
 
             <ul className={legendClasses.ul.join(' ')} aria-label='Legend items' style={{ listStyle: 'none' }}>

package/src/components/UsaMap/components/HexIcon.tsx

@@ -16,12 +16,12 @@ type HexIconProps = {
 }
 
 const HexIcon: React.FC<HexIconProps> = props => {
-  const { item, index, centroid, iconSize, textColor, isTerritory } = props
+  const { item, index, centroid, iconSize, textColor = '#000', isTerritory } = props
   if (!centroid) return
 
   if (isTerritory) {
     return (
-      <Group style={{ transform: `translate(36%, 50%)`, fill: 'currentColor' }} key={`territory-hex--${index}`}>
+      <Group style={{ transform: `translate(36%, 50%)` }} key={`territory-hex--${index}`}>
         {item.shape === 'Arrow Down' && <AiOutlineArrowDown size={12} stroke='none' fontWeight={100} />}
         {item.shape === 'Arrow Up' && <AiOutlineArrowUp size={12} stroke='none' fontWeight={100} />}
         {item.shape === 'Arrow Right' && <AiOutlineArrowRight size={12} stroke='none' fontWeight={100} />}

package/src/components/UsaMap/components/Territory/Territory.Rectangle.tsx

@@ -17,7 +17,7 @@ const TerritoryRectangle = ({ label, text, stroke, strokeWidth, textColor, hasPa
           d='M40,0.5 C41.2426407,0.5 42.3676407,1.00367966 43.1819805,1.81801948 C43.9963203,2.63235931 44.5,3.75735931 44.5,5 L44.5,5 L44.5,23 C44.5,24.2426407 43.9963203,25.3676407 43.1819805,26.1819805 C42.3676407,26.9963203 41.2426407,27.5 40,27.5 L40,27.5 L5,27.5 C3.75735931,27.5 2.63235931,26.9963203 1.81801948,26.1819805 C1.00367966,25.3676407 0.5,24.2426407 0.5,23 L0.5,23 L0.5,5 C0.5,3.75735931 1.00367966,2.63235931 1.81801948,1.81801948 C2.63235931,1.00367966 3.75735931,0.5 5,0.5 L5,0.5 Z'
           {...props}
         />
-        <text textAnchor='middle' dominantBaseline='middle' x='50%' y='54%' fill={text} style={{ stroke: textColor, strokeWidth: 1 }} className='territory-text' paint-order='stroke'>
+        <text textAnchor='middle' dominantBaseline='middle' x='50%' y='54%' fill={text} style={{ stroke: textColor, strokeWidth: 1 }} className='territory-text' paintOrder='stroke'>
           {label}
         </text>
 

package/src/components/UsaMap/components/UsaMap.County.tsx

@@ -127,7 +127,9 @@ const CountyMap = props => {
       handleMapAriaLabels,
       runtimeLegend,
       state,
-      runtimeFilters
+      runtimeFilters,
+      tooltipId,
+      isEditor
   } = useContext(ConfigContext)
 
   // CREATE STATE LINES
@@ -138,7 +140,7 @@ const CountyMap = props => {
 
   const pathGenerator = geoPath().projection(geoAlbersUsaTerritories())
 
-  const { featureArray } = useMapLayers(state, '', pathGenerator, false)
+  const { featureArray } = useMapLayers(state, '', pathGenerator, tooltipId)
 
   useEffect(() => {
     if (containerEl) {
@@ -322,7 +324,7 @@ const CountyMap = props => {
 
           tooltipRef.current.style.display = 'block'
           tooltipRef.current.style.top = e.clientY + 'px'
-          tooltipRef.current.style.left = e.clientX + 'px'
+          tooltipRef.current.style.left = isEditor ? Number(e.clientX - 350) + 'px' : e.clientX + 'px'
           tooltipRef.current.innerHTML = applyTooltipsToGeo(displayGeoName(county.id), data[county.id])
           tooltipRef.current.setAttribute('data-index', countyIndex)
         } else {
@@ -520,8 +522,9 @@ const CountyMap = props => {
           tooltipRef.current.setAttribute('data-index', null)
         }}
         onClick={canvasClick}
+        className='county-map-canvas'
       ></canvas>
-      <div ref={tooltipRef} id='canvas-tooltip' className='tooltip' style={{ background: `rgba(255,255,255,${state.tooltips.opacity / 100})` }}></div>
+      <div ref={tooltipRef} id={`tooltip__${tooltipId}`} className='tooltip' style={{ background: `rgba(255,255,255,${state.tooltips.opacity / 100})` }}></div>
       <button className={`btn btn--reset`} onClick={onReset} ref={resetButton} tabIndex='0'>
         Reset Zoom
       </button>

package/src/components/UsaMap/components/UsaMap.Region.tsx

@@ -41,6 +41,7 @@ const UsaRegionMap = props => {
     handleMapAriaLabels,
     state,
     supportedTerritories,
+    tooltipId
   } = useContext(ConfigContext)
 
   // "Choose State" options
@@ -111,7 +112,7 @@ const UsaRegionMap = props => {
         }
       }
 
-      return <Shape key={label} label={label} css={styles} text={styles.color} stroke={geoStrokeColor} strokeWidth={1.5} onClick={() => geoClickHandler(territory, territoryData)} data-tooltip-id='tooltip' data-tooltip-html={toolTip} />
+      return <Shape key={label} label={label} css={styles} text={styles.color} stroke={geoStrokeColor} strokeWidth={1.5} onClick={() => geoClickHandler(territory, territoryData)} data-tooltip-id={`tooltip__${tooltipId}`} data-tooltip-html={toolTip} />
     }
   })
 
@@ -201,7 +202,7 @@ const UsaRegionMap = props => {
         const circleRadius = 15
 
         return (
-          <g key={key} className='geo-group' style={styles} onClick={() => geoClickHandler(geoDisplayName, geoData)} data-tooltip-id='tooltip' data-tooltip-html={toolTip} tabIndex={-1}>
+          <g key={key} className='geo-group' style={styles} onClick={() => geoClickHandler(geoDisplayName, geoData)} data-tooltip-id={`tooltip__${tooltipId}`} data-tooltip-html={toolTip} tabIndex={-1}>
             <path tabIndex={-1} className='single-geo' stroke={geoStrokeColor} strokeWidth={1.3} d={path} />
             <g id={`region-${index + 1}-label`}>
               <circle fill='#fff' stroke='#999' cx={circleRadius} cy={circleRadius} r={circleRadius} />

package/src/components/UsaMap/components/UsaMap.SingleState.tsx

@@ -112,7 +112,8 @@ const SingleStateMap = props => {
     titleCase,
     setSharedFilterValue,
     isFilterValueSupported,
-    runtimeFilters
+    runtimeFilters,
+    tooltipId
   } = useContext(ConfigContext)
 
   const projection = geoAlbersUsaTerritories().translate([WIDTH / 2, HEIGHT / 2])
@@ -236,13 +237,13 @@ const SingleStateMap = props => {
         }
 
         return (
-          <g key={`key--${county.id}`} className={`county county--${geoDisplayName.split(' ').join('')} county--${geoData[state.columns.geo.name]}`} style={styles} onClick={() => geoClickHandler(geoDisplayName, geoData)} data-tooltip-id='tooltip' data-tooltip-html={toolTip}>
+          <g key={`key--${county.id}`} className={`county county--${geoDisplayName.split(' ').join('')} county--${geoData[state.columns.geo.name]}`} style={styles} onClick={() => geoClickHandler(geoDisplayName, geoData)} data-tooltip-id={`tooltip__${tooltipId}`} data-tooltip-html={toolTip}>
             <path tabIndex={-1} className={`county`} stroke={geoStrokeColor} d={countyPath} strokeWidth={0.75 / scale} />
           </g>
         )
       } else {
         return (
-          <g key={`key--${county.id}`} className={`county county--${geoDisplayName.split(' ').join('')}`} style={{ fill: '#e6e6e6' }} data-tooltip-id='tooltip' data-tooltip-html={toolTip}>
+          <g key={`key--${county.id}`} className={`county county--${geoDisplayName.split(' ').join('')}`} style={{ fill: '#e6e6e6' }} data-tooltip-id={`tooltip__${tooltipId}`} data-tooltip-html={toolTip}>
             <path tabIndex={-1} className={`county`} stroke={geoStrokeColor} d={countyPath} strokeWidth={0.75 / scale} />
           </g>
         )
@@ -264,6 +265,7 @@ const SingleStateMap = props => {
         titleCase={titleCase}
         setSharedFilterValue={setSharedFilterValue}
         isFilterValueSupported={isFilterValueSupported}
+        tooltipId={tooltipId}
       />
     )
 

package/src/components/UsaMap/components/UsaMap.State.tsx

@@ -64,6 +64,7 @@ const UsaMap = () => {
       state,
       supportedTerritories,
       titleCase,
+      tooltipId
     } = useContext<MapContext>(ConfigContext)
 
   let isFilterValueSupported = false
@@ -163,7 +164,20 @@ const UsaMap = () => {
 
       return (
         <>
-          <Shape key={label} label={label} style={styles} text={styles.color} strokeWidth={1.5} textColor={textColor} onClick={() => geoClickHandler(territory, territoryData)} data-tooltip-id='tooltip' data-tooltip-html={toolTip} territory={territory} territoryData={territoryData} tabIndex={-1} />
+          <Shape
+            key={label}
+            label={label}
+            style={styles}
+            text={styles.color}
+            strokeWidth={1.5}
+            textColor={textColor}
+            onClick={() => geoClickHandler(territory, territoryData)}
+            data-tooltip-id={`tooltip__${tooltipId}`}
+            data-tooltip-html={toolTip}
+            territory={territory}
+            territoryData={territoryData}
+            tabIndex={-1}
+          />
         </>
       )
     }
@@ -172,7 +186,7 @@ const UsaMap = () => {
   let pathGenerator = geoPath().projection(geoAlbersUsa().translate(translate))
 
   // Note: Layers are different than patterns
-  const { pathArray } = useMapLayers(state, '', pathGenerator)
+  const { pathArray } = useMapLayers(state, '', pathGenerator, tooltipId)
 
   // Constructs and displays markup for all geos on the map (except territories right now)
   const constructGeoJsx = (geographies, projection) => {
@@ -261,33 +275,33 @@ const UsaMap = () => {
                   switch (item.operator) {
                     case '=':
                       if (geoData[item.key] === item.value || Number(geoData[item.key]) === Number(item.value)) {
-                        return <HexIcon item={item} index={itemIndex} centroid={centroid} iconSize={iconSize} />
+                        return <HexIcon textColor={textColor} item={item} index={itemIndex} centroid={centroid} iconSize={iconSize} />
                       }
                       break
                     case '≠':
                       if (geoData[item.key] !== item.value && Number(geoData[item.key]) !== Number(item.value)) {
-                        return <HexIcon item={item} index={itemIndex} centroid={centroid} iconSize={iconSize} />
+                        return <HexIcon textColor={textColor} item={item} index={itemIndex} centroid={centroid} iconSize={iconSize} />
                       }
                       break
                     case '<':
                       if (Number(geoData[item.key]) < Number(item.value)) {
-                        return <HexIcon item={item} index={itemIndex} centroid={centroid} iconSize={iconSize} />
+                        return <HexIcon textColor={textColor} item={item} index={itemIndex} centroid={centroid} iconSize={iconSize} />
                       }
                       break
                     case '>':
                       if (Number(geoData[item.key]) > Number(item.value)) {
-                        return <HexIcon item={item} index={itemIndex} centroid={centroid} iconSize={iconSize} />
+                        return <HexIcon textColor={textColor} item={item} index={itemIndex} centroid={centroid} iconSize={iconSize} />
                       }
                       break
                     case '<=':
                       if (Number(geoData[item.key]) <= Number(item.value)) {
-                        return <HexIcon item={item} index={itemIndex} centroid={centroid} iconSize={iconSize} />
+                        return <HexIcon textColor={textColor} item={item} index={itemIndex} centroid={centroid} iconSize={iconSize} />
                       }
                       break
                     case '>=':
                       if (item.operator === '>=') {
                         if (Number(geoData[item.key]) >= Number(item.value)) {
-                          return <HexIcon item={item} index={itemIndex} centroid={centroid} iconSize={iconSize} />
+                          return <HexIcon textColor={textColor} item={item} index={itemIndex} centroid={centroid} iconSize={iconSize} />
                         }
                       }
                       break
@@ -302,7 +316,7 @@ const UsaMap = () => {
 
         return (
           <g data-name={geoName} key={key} tabIndex={-1}>
-            <g className='geo-group' style={styles} onClick={() => geoClickHandler(geoDisplayName, geoData)} id={geoName} data-tooltip-id='tooltip' data-tooltip-html={tooltip} tabIndex={-1}>
+            <g className='geo-group' style={styles} onClick={() => geoClickHandler(geoDisplayName, geoData)} id={geoName} data-tooltip-id={`tooltip__${tooltipId}`} data-tooltip-html={tooltip} tabIndex={-1}>
               {/* state path */}
               <path tabIndex={-1} className='single-geo' strokeWidth={1.3} d={path} />
 
@@ -311,7 +325,7 @@ const UsaMap = () => {
                 const { pattern, dataKey, size } = patternData
                 const currentFill = styles.fill
                 const hasMatchingValues = patternData.dataValue === geoData[patternData.dataKey]
-                const patternColor = getContrastColor('#000', currentFill)
+                const patternColor = patternData.color || getContrastColor('#000', currentFill)
 
                 return (
                   hasMatchingValues && (
@@ -358,6 +372,7 @@ const UsaMap = () => {
         setSharedFilterValue={setSharedFilterValue}
         state={state}
         titleCase={titleCase}
+        tooltipId={tooltipId}
       />
     )
 

package/src/components/WorldMap/components/WorldMap.jsx

@@ -34,7 +34,8 @@ const WorldMap = props => {
     setState,
     state,
     supportedCountries,
-    titleCase
+    titleCase,
+    tooltipId
   } = useContext(ConfigContext)
 
   // TODO Refactor - state should be set together here to avoid rerenders
@@ -155,7 +156,20 @@ const WorldMap = props => {
         }
 
         return (
-          <Geo additionalData={additionalData} geoData={geoData} state={state} key={i + '-geo'} style={styles} path={path} stroke={geoStrokeColor} strokeWidth={strokeWidth} onClick={() => geoClickHandler(geoDisplayName, geoData)} data-tooltip-id='tooltip' data-tooltip-html={toolTip} tabIndex={-1} />
+          <Geo
+            additionalData={additionalData}
+            geoData={geoData}
+            state={state}
+            key={i + '-geo'}
+            style={styles}
+            path={path}
+            stroke={geoStrokeColor}
+            strokeWidth={strokeWidth}
+            onClick={() => geoClickHandler(geoDisplayName, geoData)}
+            data-tooltip-id={`tooltip__${tooltipId}`}
+            data-tooltip-html={toolTip}
+            tabIndex={-1}
+          />
         )
       }
 
@@ -164,7 +178,7 @@ const WorldMap = props => {
     })
 
     // Cities
-    geosJsx.push(<CityList applyLegendToRow={applyLegendToRow} applyTooltipsToGeo={applyTooltipsToGeo} data={data} displayGeoName={displayGeoName} geoClickHandler={geoClickHandler} key='cities' projection={projection} state={state} titleCase={titleCase} />)
+    geosJsx.push(<CityList applyLegendToRow={applyLegendToRow} applyTooltipsToGeo={applyTooltipsToGeo} data={data} displayGeoName={displayGeoName} geoClickHandler={geoClickHandler} key='cities' projection={projection} state={state} titleCase={titleCase} tooltipId={tooltipId} />)
 
     // Bubbles
     if (state.general.type === 'bubble') {
@@ -178,6 +192,7 @@ const WorldMap = props => {
           applyLegendToRow={applyLegendToRow}
           applyTooltipsToGeo={applyTooltipsToGeo}
           displayGeoName={displayGeoName}
+          tooltipId={tooltipId}
           handleCircleClick={country => handleCircleClick(country, state, setState, setRuntimeData, generateRuntimeData)}
         />
       )

package/src/data/supported-geos.js

@@ -684,6 +684,7 @@ 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/hooks/useMapLayers.tsx

@@ -16,7 +16,7 @@ import { MapConfig } from '../types/MapConfig'
  * 3) Clean (ie. mapshaper -clean) and edit the shape as needed and export the new layer as geoJSON
  * 4) Save the geoJSON somewhere external.
  */
-export default function useMapLayers(config: MapConfig, setConfig, pathGenerator) {
+export default function useMapLayers(config: MapConfig, setConfig, pathGenerator, tooltipId) {
   const [fetchedTopoJSON, setFetchedTopoJSON] = useState([])
   const geoId = useId()
 
@@ -158,7 +158,7 @@ export default function useMapLayers(config: MapConfig, setConfig, pathGenerator
               key={geoId} data-id={geoId}
               stroke={config.map.layers[index].stroke ? config.map.layers[index].stroke : item.properties.stroke ? item.properties.stroke : 'transparent'}
               strokeWidth={config.map.layers[index].strokeWidth ? config.map.layers[index].strokeWidth : item.properties['stroke-width']}
-              data-tooltip-id='tooltip'
+              data-tooltip-id={`tooltip__${tooltipId}`}
               data-tooltip-html={config.map.layers[index].tooltip ? config.map.layers[index].tooltip : ''}
             />
           </Group>

package/src/scss/editor-panel.scss

@@ -82,7 +82,7 @@
     color: #000;
     font-size: 1em;
     border: 0;
-    position: absolute;
+    position: fixed;
     z-index: 100;
     transition: 0.1s background;
     cursor: pointer;
@@ -110,17 +110,6 @@
   }
 
   .editor-panel {
-    background: #fff;
-    width: $editorWidth;
-    overflow-y: overlay;
-    position: absolute;
-    z-index: 7;
-    display: flex;
-    flex-direction: column;
-    left: 0;
-    top: 0;
-    bottom: 0;
-
     //TODO: Remove after COVE refactor
     &.cove {
       @import '@cdc/core/styles/v2/layout/tooltip.scss';

package/src/scss/main.scss

@@ -40,6 +40,7 @@
   border: 0;
   text-align: left;
   max-width: 100%;
+  background-color: white;
   .btn {
     padding: 0.375em 0.75em;
     border-radius: 0.3em;
@@ -129,7 +130,7 @@
           svg {
             display: inline-block;
             max-width: 13px;
-            margin-left: .5em;
+            margin-left: 0.5em;
           }
         }
         &.capitalize p {

package/src/scss/map.scss

@@ -365,7 +365,7 @@ canvas {
   width: 100%;
 }
 
-#canvas-tooltip {
+.county-map-canvas + .tooltip {
   position: fixed;
   background-color: white;
   pointer-events: none;