@cdc/map 4.25.6-1 → 4.25.7

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

@@ -1104,8 +1104,9 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                 </span>
                 <ul className='geo-buttons d-grid' style={{ gridTemplateColumns: 'repeat(2, 1fr)', gap: '8px' }}>
                   <button
-                    className={`${config.general.geoType === 'us' || config.general.geoType === 'us-county' ? 'active' : ''
-                      } full-width`}
+                    className={`${
+                      config.general.geoType === 'us' || config.general.geoType === 'us-county' ? 'active' : ''
+                    } full-width`}
                     onClick={e => {
                       e.preventDefault()
                       handleEditorChanges('geoType', 'us')
@@ -3110,19 +3111,19 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
               )}
               {(config.general.geoType === 'world' ||
                 (config.general.geoType === 'us' && config.general.type === 'bubble')) && (
-                  <label className='checkbox'>
-                    <input
-                      type='checkbox'
-                      checked={config.visual.showBubbleZeros}
-                      onChange={event => {
-                        const _newConfig = _.cloneDeep(config)
-                        _newConfig.visual.showBubbleZeros = event.target.checked
-                        setConfig(_newConfig)
-                      }}
-                    />
-                    <span className='edit-label'>Show Data with Zero's on Bubble Map</span>
-                  </label>
-                )}
+                <label className='checkbox'>
+                  <input
+                    type='checkbox'
+                    checked={config.visual.showBubbleZeros}
+                    onChange={event => {
+                      const _newConfig = _.cloneDeep(config)
+                      _newConfig.visual.showBubbleZeros = event.target.checked
+                      setConfig(_newConfig)
+                    }}
+                  />
+                  <span className='edit-label'>Show Data with Zero's on Bubble Map</span>
+                </label>
+              )}
               {(config.general.geoType === 'world' || config.general.geoType === 'single-state') && (
                 <label className='checkbox'>
                   <input
@@ -3156,42 +3157,42 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
               {(config.general.geoType === 'us' ||
                 config.general.geoType === 'us-county' ||
                 config.general.geoType === 'world') && (
-                  <>
-                    <label>
-                      <span className='edit-label'>Default City Style</span>
-                      <select
-                        value={config.visual.cityStyle || false}
-                        onChange={event => {
-                          handleEditorChanges('handleCityStyle', event.target.value)
-                        }}
-                      >
-                        <option value='circle'>Circle</option>
-                        <option value='pin'>Pin</option>
-                        <option value='square'>Square</option>
-                        <option value='triangle'>Triangle</option>
-                        <option value='diamond'>Diamond</option>
-                        <option value='star'>Star</option>
-                      </select>
-                    </label>
-                    <TextField
-                      value={config.visual.cityStyleLabel}
-                      section='visual'
-                      fieldName='cityStyleLabel'
-                      label='Label (Optional) '
-                      updateField={updateField}
-                      tooltip={
-                        <Tooltip style={{ textTransform: 'none' }}>
-                          <Tooltip.Target>
-                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                          </Tooltip.Target>
-                          <Tooltip.Content>
-                            <p>When a label is provided, the default city style will appear in the legend.</p>
-                          </Tooltip.Content>
-                        </Tooltip>
-                      }
-                    />
-                  </>
-                )}
+                <>
+                  <label>
+                    <span className='edit-label'>Default City Style</span>
+                    <select
+                      value={config.visual.cityStyle || false}
+                      onChange={event => {
+                        handleEditorChanges('handleCityStyle', event.target.value)
+                      }}
+                    >
+                      <option value='circle'>Circle</option>
+                      <option value='pin'>Pin</option>
+                      <option value='square'>Square</option>
+                      <option value='triangle'>Triangle</option>
+                      <option value='diamond'>Diamond</option>
+                      <option value='star'>Star</option>
+                    </select>
+                  </label>
+                  <TextField
+                    value={config.visual.cityStyleLabel}
+                    section='visual'
+                    fieldName='cityStyleLabel'
+                    label='Label (Optional) '
+                    updateField={updateField}
+                    tooltip={
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>When a label is provided, the default city style will appear in the legend.</p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                  />
+                </>
+              )}
               {/* <AdditionalCityStyles /> */}
               <>
                 {config.visual.additionalCityStyles.length > 0 &&

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

@@ -94,7 +94,8 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
           label: parse(legendLabel),
           disabled: entry.disabled,
           special: entry.hasOwnProperty('special'),
-          value: [entry.min, entry.max]
+          value: legend.type === 'category' ? entry.value : [entry.min, entry.max],
+          categoryValue: legend.type === 'category' ? entry.value : undefined
         }
       })
     } catch (e) {
@@ -122,19 +123,48 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
         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(idx, item.label, runtimeLegend, setRuntimeLegend, setAccessibleStatus)}
+          onClick={() =>
+            toggleLegendActive(safeRuntimeIndex, item.label, runtimeLegend, setRuntimeLegend, setAccessibleStatus)
+          }
           onKeyDown={e => {
             if (e.key === 'Enter') {
               e.preventDefault()
-              toggleLegendActive(idx, item.label, runtimeLegend, setRuntimeLegend, setAccessibleStatus)
+              toggleLegendActive(safeRuntimeIndex, item.label, runtimeLegend, setRuntimeLegend, setAccessibleStatus)
             }
           }}
           tabIndex={0}
+          role='button'
         >
           <LegendShape shape={config.legend.style === 'boxes' ? 'square' : 'circle'} fill={item.color} />
           <span>{item.label}</span>

package/src/helpers/applyColorToLegend.ts

@@ -7,49 +7,68 @@ type LegendItem = {
   special: boolean
 }
 
-/**
- * applyColorToLegend
- * @param legendIdx legend item index
- * @param config chart config
- * @param result hash of legend items
- * @returns string - the corresponding color for the legend item
- */
-export const applyColorToLegend = (legendIdx: number, config: MapConfig, result: LegendItem[] = []): string => {
+//  Applies color to a legend item based on its index and special classes.
+export const applyColorToLegend = (legendItemIndex: number, config: MapConfig, result: LegendItem[] = []): string => {
   if (!config) throw new Error('Config is required')
 
   const { legend, customColors, general, color } = config
   const { geoType, palette } = general
   const specialClasses = legend?.specialClasses ?? []
-  const mapColorPalette = customColors ?? colorPalettes[color] ?? colorPalettes['bluegreen']
+  const colorPalette = customColors ?? colorPalettes[color] ?? colorPalettes['bluegreen']
 
   // Handle Region Maps need for a 10th color
-  if (geoType === 'us-region' && mapColorPalette.length < 10 && mapColorPalette.length > 8) {
-    const newColor = chroma(mapColorPalette[palette.isReversed ? 0 : 8])
+  if (geoType === 'us-region' && colorPalette.length < 10 && colorPalette.length > 8) {
+    const darkenedColor = chroma(colorPalette[palette.isReversed ? 0 : 8])
       .darken(0.75)
       .hex()
-    palette.isReversed ? mapColorPalette.unshift(newColor) : mapColorPalette.push(newColor)
+    palette.isReversed ? colorPalette.unshift(darkenedColor) : colorPalette.push(darkenedColor)
   }
 
-  const colorIdx = legendIdx - specialClasses.length
+  // Check if there are actually any special classes in the current result
+  const actualSpecialClassesCount = result.filter(item => item.special).length
+
+  const regularItemColorIndex = legendItemIndex - actualSpecialClassesCount
 
   // Handle special classes coloring
-  if (result[legendIdx]?.special) {
+  if (result[legendItemIndex]?.special) {
     const specialClassColors = chroma.scale(['#D4D4D4', '#939393']).colors(specialClasses.length)
-    return specialClassColors[legendIdx]
+    return specialClassColors[legendItemIndex]
+  }
+
+  // For categorical maps with custom colors, use color distribution logic
+  if (config.legend?.type === 'category' && customColors) {
+    const amt = config.legend.additionalCategories?.length ?? 10
+    const distributionArray = colorDistributions[amt] ?? []
+
+    const specificColor = distributionArray[legendItemIndex - specialClasses.length] ?? colorPalette.at(-1)
+
+    // If specificColor is a number, use it as an index; otherwise return the color directly
+    return colorPalette[specificColor] ?? '#fff'
   }
 
   // Use qualitative color palettes directly
-  if (color.includes('qualitative')) return mapColorPalette[colorIdx]
+  if (color.includes('qualitative')) {
+    const safeIndex = Math.max(0, Math.min(regularItemColorIndex, colorPalette.length - 1))
+    return colorPalette[safeIndex]
+  }
 
-  // Determine color distribution
-  const amt =
-    Math.max(result.length - specialClasses.length, 1) < 10
-      ? Math.max(result.length - specialClasses.length, 1)
+  // Determine color distribution - use actual special classes count for consistent coloring
+  const legendItemCount =
+    Math.max(result.length - actualSpecialClassesCount, 1) < 10
+      ? Math.max(result.length - actualSpecialClassesCount, 1)
       : Object.keys(colorDistributions).length
-  const distributionArray = colorDistributions[amt] ?? []
 
-  const specificColor =
-    distributionArray[legendIdx - specialClasses.length] ?? mapColorPalette[colorIdx] ?? mapColorPalette.at(-1)
+  const colorDistributionArray = colorDistributions[legendItemCount] ?? []
+
+  const rowDistributionIndex = colorDistributionArray[legendItemIndex - actualSpecialClassesCount]
+
+  const colorValue = rowDistributionIndex ?? colorPalette[regularItemColorIndex] ?? colorPalette.at(-1)
+
+  // Check if specificColor is a string(e.g., a valid color code)
+  if (typeof colorValue === 'string' && config.legend?.type === 'category' && customColors) {
+    return colorValue
+  }
 
-  return mapColorPalette[specificColor]
+  // Otherwise, use specificColor as an index for mapColorPalette
+  return colorPalette[colorValue]
 }

package/src/helpers/applyLegendToRow.ts

@@ -29,21 +29,23 @@ export const applyLegendToRow = (
       return generateColorsArray(mapColorPalette[3])
     }
 
-    const hash = hashObj(rowObj)
+    const hash = String(hashObj(rowObj))
 
     if (!legendMemo.current.has(hash)) {
       return generateColorsArray()
     }
 
     const idx = legendMemo.current.get(hash)!
-    const disabledIdx = showSpecialClassesLast ? legendSpecialClassLastMemo.current.get(hash) ?? idx : idx
 
-    if (runtimeLegend.items?.[disabledIdx]?.disabled) {
+    if (runtimeLegend.items?.[idx]?.disabled) {
       return generateColorsArray()
     }
 
-    const legendBinColor = runtimeLegend.items.find(o => o.bin === idx)?.color
-    return generateColorsArray(legendBinColor, runtimeLegend.items[idx]?.special)
+    // Use the index from legendMemo which should already be updated for reordered items
+    const legendItem = runtimeLegend.items?.[idx]
+    const legendBinColor = legendItem?.color
+
+    return generateColorsArray(legendBinColor, legendItem?.special)
   } catch (e) {
     console.error('COVE: ', e)
     return null