@cdc/map 4.24.2 → 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/HexShapeSettings.tsx

@@ -4,7 +4,7 @@ import parse from 'html-react-parser'
 import { AiOutlineArrowUp, AiOutlineArrowDown, AiOutlineArrowRight } from 'react-icons/ai'
 import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
 
-const shapeOptions = ['Arrow Up', 'Arrow Down', 'Arrow Right', 'None']
+const shapeOptions = ['Arrow Up', 'Arrow Down', 'Arrow Right', 'Arrow Left', 'None']
 
 // todo: Move duplicated operators to CORE
 export const DATA_OPERATOR_LESS = '<'
@@ -221,6 +221,21 @@ const HexSettingShapeColumns = props => {
                                               {[DATA_OPERATOR_EQUAL].map(option => {
                                                 return <option value={option}>{option}</option>
                                               })}
+                                              {[DATA_OPERATOR_NOTEQUAL].map(option => {
+                                                return <option value={option}>{option}</option>
+                                              })}
+                                              {[DATA_OPERATOR_LESS].map(option => {
+                                                return <option value={option}>{option}</option>
+                                              })}
+                                              {[DATA_OPERATOR_GREATER].map(option => {
+                                                return <option value={option}>{option}</option>
+                                              })}
+                                              {[DATA_OPERATOR_LESSEQUAL].map(option => {
+                                                return <option value={option}>{option}</option>
+                                              })}
+                                              {[DATA_OPERATOR_GREATEREQUAL].map(option => {
+                                                return <option value={option}>{option}</option>
+                                              })}
                                             </select>
                                           </div>
                                           <div className='cove-accordion__panel-col cove-input'>

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

@@ -1,18 +1,26 @@
 //TODO: Move legends to core
-import { useContext } from 'react'
+import { forwardRef, useContext } from 'react'
 import parse from 'html-react-parser'
-import chroma from 'chroma-js'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import LegendCircle from '@cdc/core/components/LegendCircle'
 import LegendItemHex from './LegendItem.Hex'
+import Button from '@cdc/core/components/elements/Button'
 
 import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
 import ConfigContext from '../../../context'
 import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
+import { GlyphStar, GlyphTriangle, GlyphDiamond, GlyphSquare, GlyphCircle } from '@visx/glyph'
+import { Group } from '@visx/group'
 import './index.scss'
 
-const Legend = () => {
+type LegendProps = {
+  skipId: string
+}
+
+const Legend = forwardRef((props, ref) => {
+  const { skipId } = props
+
   // prettier-ignore
   const {
     displayDataAsText,
@@ -26,6 +34,7 @@ const Legend = () => {
   } = 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) => {
@@ -87,14 +96,22 @@ const Legend = () => {
       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`}
           onClick={() => {
             toggleLegendActive(idx, legendLabel)
           }}
+          onKeyDown={e => {
+            if (e.key === 'Enter') {
+              e.preventDefault()
+              toggleLegendActive(idx, legendLabel)
+            }
+          }}
+          tabIndex={0}
         >
-          <LegendCircle fill={entry.color} /> <span className='label'>{legendLabel}</span>
+          <LegendCircle viewport={viewport} fill={entry.color} /> <span>{legendLabel}</span>
         </li>
       )
     })
@@ -114,7 +131,7 @@ const Legend = () => {
 
         legendItems.push(
           <>
-            <li className={`legend-container__li legend-container__li--geo-pattern`}>
+            <li className={`legend-container__li legend-container__li--geo-pattern`} aria-label='You are on a pattern button. We dont support toggling patterns on this legend at the moment, but provide the area as being focusable for congruity.' tabIndex={0}>
               <span className='legend-item' style={{ border: 'unset' }}>
                 <svg width={legendSize} height={legendSize}>
                   {pattern === 'waves' && <PatternWaves id={`${dataKey}--${patternDataIndex}`} height={sizes[size] ?? 10} width={sizes[size] ?? 10} fill={defaultPatternColor} />}
@@ -136,23 +153,39 @@ const Legend = () => {
   const { legendClasses } = useDataVizClasses(state, viewport)
 
   const handleReset = e => {
-    e.preventDefault()
+    const legend = ref.current
+    if (e) {
+      e.preventDefault()
+    }
     resetLegendToggles()
     setAccessibleStatus('Legend has been reset, please reference the data table to see updated values.')
+    if (legend) {
+      legend.focus()
+    }
+  }
+
+  const pin = <path className='marker' d='M0,0l-8.8-17.7C-12.1-24.3-7.4-32,0-32h0c7.4,0,12.1,7.7,8.8,14.3L0,0z' strokeWidth={2} stroke={'black'} transform={`scale(0.5)`} />
+
+  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} />
   }
 
   return (
     <ErrorBoundary component='Sidebar'>
       <div className='legends'>
-        <aside id='legend' className={legendClasses.aside.join(' ') || ''} role='region' aria-label='Legend'>
+        <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'>
-            {runtimeLegend.disabledAmt > 0 && (
-              <button onClick={handleReset} className={legendClasses.resetButton.join(' ') || ''}>
-                Clear
-              </button>
+            {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.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.dynamicDescription === true &&
               runtimeFilters.map((filter, idx) => {
                 const lookupStr = `${idx},${filter.values.indexOf(String(filter.active))}`
@@ -162,7 +195,7 @@ const Legend = () => {
 
                 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>
                   )
@@ -172,12 +205,44 @@ const Legend = () => {
             <ul className={legendClasses.ul.join(' ') || ''} aria-label='Legend items'>
               {legendList()}
             </ul>
+            {(state.visual.additionalCityStyles.some(c => c.label) || state.visual.cityStyleLabel) && (
+              <>
+                <hr />
+                <div className={legendClasses.div.join(' ') || ''}>
+                  {state.visual.cityStyleLabel && (
+                    <div>
+                      <svg>
+                        <Group top={state.visual.cityStyle === 'pin' ? 19 : state.visual.cityStyle === 'triangle' ? 13 : 11} left={10}>
+                          {cityStyleShapes[state.visual.cityStyle.toLowerCase()]}
+                        </Group>
+                      </svg>
+                      <p>{state.visual.cityStyleLabel}</p>
+                    </div>
+                  )}
+
+                  {state.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 style={fontSize}>{label}</p>
+                        </div>
+                      )
+                  )}
+                </div>
+              </>
+            )}
+            {runtimeLegend.disabledAmt > 0 && <Button onClick={handleReset}>Reset</Button>}
           </section>
         </aside>
         {state.hexMap.shapeGroups?.length > 0 && state.hexMap.type === 'shapes' && state.general.displayAsHex && <LegendItemHex state={state} runtimeLegend={runtimeLegend} viewport={viewport} />}
       </div>
     </ErrorBoundary>
   )
-}
+})
 
 export default Legend

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/Legend/components/index.scss

@@ -89,17 +89,14 @@
       }
       .legend-container__reset-button {
         font-size: 0.75em;
-        color: rgba(0, 0, 0, 0.6);
-        position: absolute;
         right: 1em;
-        background: rgba(0, 0, 0, 0.1);
         text-transform: uppercase;
         transition: 0.2s all;
         padding: 0.2em 0.5em;
         border: rgba(0, 0, 0, 0.2) 1px solid;
+        padding: 0.375rem;
         &:hover {
           text-decoration: none;
-          background: rgba(0, 0, 0, 0.15);
           transition: 0.2s all;
         }
       }
@@ -118,7 +115,7 @@
           flex-direction: column;
         }
 
-        &:not(.vertical-sorted, .legend-container__ul--single-column) {
+        &:not(.vertical-sorted, .legend-container__ul--single-column, .single-row) {
           width: 100%;
           @include breakpoint(sm) {
             .legend-container__li {
@@ -231,5 +228,34 @@
         }
       }
     }
+    & .shape-container {
+      &.single-row {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+
+        & > div {
+          margin-right: 2em;
+        }
+        & > div:last-child {
+          margin-right: 0;
+        }
+      }
+
+      & > div {
+        display: flex;
+        flex-direction: row;
+      }
+      & div > svg {
+        width: 25px;
+        height: 32px;
+      }
+      & div > p {
+        white-space: nowrap;
+        margin-top: 1px;
+      }
+    }
   }
 }

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

@@ -0,0 +1,41 @@
+import { AiOutlineArrowUp, AiOutlineArrowDown, AiOutlineArrowRight, AiOutlineArrowLeft } from 'react-icons/ai'
+import { Group } from '@visx/group'
+
+type HexIconProps = {
+  item: {
+    operator: '=' | '≠' | '<' | '>' | '<=' | '>='
+    shape: 'Arrow Up' | 'Arrow Down' | 'Arrow Right' | 'Arrow Left'
+    key: string
+    value: string
+  }
+  index: number
+  centroid: [number, number]
+  iconSize: number
+  textColor: string
+  isTerritory: boolean
+}
+
+const HexIcon: React.FC<HexIconProps> = props => {
+  const { item, index, centroid, iconSize, textColor = '#000', isTerritory } = props
+  if (!centroid) return
+
+  if (isTerritory) {
+    return (
+      <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} />}
+        {item.shape === 'Arrow Left' && <AiOutlineArrowLeft size={12} stroke='none' fontWeight={100} />}
+      </Group>
+    )
+  }
+  return (
+    <Group top={centroid[1] - 5} left={centroid[0] - iconSize} color={textColor} textAnchor='start' key={`hex--${item.key}-${item.value}-${index}`}>
+      {item.shape === 'Arrow Down' && <AiOutlineArrowDown />}
+      {item.shape === 'Arrow Up' && <AiOutlineArrowUp />}
+      {item.shape === 'Arrow Right' && <AiOutlineArrowRight />}
+      {item.shape === 'Arrow Left' && <AiOutlineArrowLeft />}
+    </Group>
+  )
+}
+export default HexIcon

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

@@ -2,10 +2,9 @@ import { useContext } from 'react'
 import { geoCentroid, geoPath } from 'd3-geo'
 import ConfigContext from './../../../../context'
 import { MapContext } from './../../../../types/MapContext'
-import { AiOutlineArrowUp, AiOutlineArrowDown, AiOutlineArrowRight } from 'react-icons/ai'
-import { Group } from '@visx/group'
+import HexIcon from '../HexIcon'
 import { Text } from '@visx/text'
-import chroma from 'chroma-js'
+import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 
 const offsets = {
   'US-VT': [50, -8],
@@ -52,16 +51,41 @@ const TerritoryHexagon = ({ label, text, stroke, strokeWidth, textColor, territo
         <>
           {state.hexMap.shapeGroups.map((group, groupIndex) => {
             return group.items.map((item, itemIndex) => {
-              if (item.operator === '=') {
-                if (geoData[item.key] === item.value || Number(geoData[item.key]) === Number(item.value)) {
-                  return (
-                    <Group style={{ transform: `translate(36%, 50%)`, fill: 'currentColor' }} key={`territory-hex--${itemIndex}`}>
-                      {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} />}
-                    </Group>
-                  )
-                }
+              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} isTerritory />
+                  }
+                  break
+                case '≠':
+                  if (geoData[item.key] !== item.value && Number(geoData[item.key]) !== Number(item.value)) {
+                    return <HexIcon item={item} index={itemIndex} centroid={centroid} isTerritory />
+                  }
+                  break
+                case '<':
+                  if (Number(geoData[item.key]) < Number(item.value)) {
+                    return <HexIcon item={item} index={itemIndex} centroid={centroid} isTerritory />
+                  }
+                  break
+                case '>':
+                  if (Number(geoData[item.key]) > Number(item.value)) {
+                    return <HexIcon item={item} index={itemIndex} centroid={centroid} isTerritory />
+                  }
+                  break
+                case '<=':
+                  if (Number(geoData[item.key]) <= Number(item.value)) {
+                    return <HexIcon item={item} index={itemIndex} centroid={centroid} isTerritory />
+                  }
+                  break
+                case '>=':
+                  if (item.operator === '>=') {
+                    if (Number(geoData[item.key]) >= Number(item.value)) {
+                      return <HexIcon item={item} index={itemIndex} centroid={centroid} isTerritory />
+                    }
+                  }
+                  break
+                default:
+                  break
               }
             })
           })}
@@ -71,12 +95,7 @@ const TerritoryHexagon = ({ label, text, stroke, strokeWidth, textColor, territo
 
     if (undefined === abbr) return null
 
-    let textColor = '#FFF'
-
-    // Dynamic text color
-    if (chroma.contrast(textColor, bgColor) < 3.5) {
-      textColor = '#202020' // dark gray
-    }
+    let textColor = getContrastColor('#FFF', bgColor)
 
     // always make HI black since it is off to the side
     if (abbr === 'US-HI') {

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

@@ -1,58 +1,47 @@
 import { useContext } from 'react'
 import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
-import chroma from 'chroma-js'
 import ConfigContext from './../../../../context'
 import { type MapContext } from '../../../../types/MapContext'
-// todo: move this somewhere that makes better sense for pattern sizes.
-const sizes = {
-  small: '8',
-  medium: '10',
-  large: '12'
-}
+import { patternSizes } from './../../helpers/patternSizes'
+import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 
 const TerritoryRectangle = ({ label, text, stroke, strokeWidth, textColor, hasPattern, territory, ...props }) => {
   const { state, supportedTerritories } = useContext<MapContext>(ConfigContext)
 
   return (
     <svg viewBox='0 0 45 28'>
-      <g {...props} strokeLinejoin='round'>
+      <g {...props} strokeLinejoin='round' tabIndex={-1}>
         <path
           stroke={stroke}
           strokeWidth={strokeWidth}
           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>
 
         {state.map.patterns.map((patternData, patternIndex) => {
-          let defaultPatternColor = 'black'
-
-          const hasMatchingValues = supportedTerritories[territory].includes(patternData?.dataValue)
-          console.log('has match', patternData)
-
-          if (chroma.contrast(defaultPatternColor, props.style.fill) < 3.5) {
-            defaultPatternColor = 'white'
-          }
+          const patternColor = getContrastColor('#FFF', props.style.fill)
+          const hasMatchingValues = supportedTerritories[territory]?.includes(patternData?.dataValue)
 
           if (!hasMatchingValues) return null
           if (!patternData.pattern) return null
 
           return (
             <>
-              {patternData?.pattern === 'waves' && <PatternWaves id={`territory-${patternData?.dataKey}--${patternIndex}`} height={sizes[patternData?.size] ?? 10} width={sizes[patternData?.size] ?? 10} fill={defaultPatternColor} complement />}
-              {patternData?.pattern === 'circles' && <PatternCircles id={`territory-${patternData?.dataKey}--${patternIndex}`} height={sizes[patternData?.size] ?? 10} width={sizes[patternData?.size] ?? 10} fill={defaultPatternColor} complement />}
-              {patternData?.pattern === 'lines' && <PatternLines id={`territory-${patternData?.dataKey}--${patternIndex}`} height={sizes[patternData?.size] ?? 6} width={sizes[patternData?.size] ?? 6} stroke={defaultPatternColor} strokeWidth={1} orientation={['diagonalRightToLeft']} />}
+              {patternData?.pattern === 'waves' && <PatternWaves id={`territory-${patternData?.dataKey}--${patternIndex}`} height={patternSizes[patternData?.size] ?? 10} width={patternSizes[patternData?.size] ?? 10} fill={patternColor} complement />}
+              {patternData?.pattern === 'circles' && <PatternCircles id={`territory-${patternData?.dataKey}--${patternIndex}`} height={patternSizes[patternData?.size] ?? 10} width={patternSizes[patternData?.size] ?? 10} fill={patternColor} complement />}
+              {patternData?.pattern === 'lines' && <PatternLines id={`territory-${patternData?.dataKey}--${patternIndex}`} height={patternSizes[patternData?.size] ?? 6} width={patternSizes[patternData?.size] ?? 6} stroke={patternColor} strokeWidth={1} orientation={['diagonalRightToLeft']} />}
               <path
                 stroke={stroke}
                 strokeWidth={strokeWidth}
                 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'
                 fill={`url(#territory-${patternData?.dataKey}--${patternIndex})`}
-                color='white'
+                color={patternData ? 'white' : textColor}
                 className={[`territory-pattern-${patternData.dataKey}`, `territory-pattern-${patternData.dataKey}--${patternData.dataValue}`].join(' ')}
               />
-              <text textAnchor='middle' dominantBaseline='middle' x='50%' y='54%' fill={text} style={{ stroke: patternData ? 'black' : textColor, strokeWidth: patternData ? 6 : 0 }} className='territory-text' paint-order='stroke'>
+              <text textAnchor='middle' dominantBaseline='middle' x='50%' y='54%' fill={text} style={{ fill: patternData ? 'white' : 'black', stroke: patternData ? 'black' : textColor, strokeWidth: patternData ? 6 : 0 }} className='territory-text' paint-order='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>