@cdc/map 4.25.7 → 4.25.10

package/src/helpers/generateRuntimeLegend.ts

@@ -14,8 +14,13 @@ import _ from 'lodash'
 import * as d3 from 'd3'
 
 // Cdc
-import colorPalettes from '@cdc/core/data/colorPalettes'
+import { mapColorPalettes as colorPalettes } from '@cdc/core/data/colorPalettes'
 import { supportedCountries } from '../data/supported-geos'
+import { getColorPaletteVersion } from '@cdc/core/helpers/getColorPaletteVersion'
+import { v2ColorDistribution } from '@cdc/core/helpers/palettes/colorDistributions'
+
+// Types
+import { MapConfig, DataRow, RuntimeFilters } from '../types/MapConfig'
 
 type LegendItem = {
   special?: boolean
@@ -33,22 +38,12 @@ export type GeneratedLegend = {
   items: LegendItem[] | []
 }
 
-// Helper function to convert and round values consistently
-const convertAndRoundValue = (value: any, roundToPlace: number): number => {
-  const num = Number(value)
-  if (isNaN(num)) return NaN
-
-  // Apply rounding to handle floating-point precision issues
-  const factor = Math.pow(10, roundToPlace)
-  return Math.round(num * factor) / factor
-}
-
 export const generateRuntimeLegend = (
-  configObj,
-  runtimeData: object[],
+  configObj: MapConfig,
+  runtimeData: DataRow[],
   hash: string,
-  setConfig: Function,
-  runtimeFilters: object[],
+  setConfig: (newMapConfig: MapConfig) => void,
+  runtimeFilters: RuntimeFilters,
   legendMemo: React.MutableRefObject<Map<string, number>>,
   legendSpecialClassLastMemo: React.MutableRefObject<Map<string, number>>
 ): GeneratedLegend | [] => {
@@ -61,8 +56,8 @@ export const generateRuntimeLegend = (
     if (!legendSpecialClassLastMemo) Error('No legend special class last memo provided')
 
     // Define variables..
-    const newLegendMemo = new Map<string, number>() // Reset memoization
-    const newLegendSpecialClassLastMemo = new Map<string, number>() // Reset bin memoization
+    const newLegendMemo = new Map() // Reset memoization
+    const newLegendSpecialClassLastMemo = new Map() // Reset bin memoization
     const countryKeys = Object.keys(supportedCountries)
     const { legend, columns, general } = configObj
     const primaryColName = columns.primary.name
@@ -89,12 +84,9 @@ export const generateRuntimeLegend = (
     // Unified will base the legend off ALL the data maps received. Otherwise, it will use
     let dataSet = legend.unified ? data : Object?.values(runtimeData)
 
-    const roundToPlace = Number(columns?.primary?.roundToPlace) || 1
-    let domainNums = Array.from(
-      new Set(dataSet?.map(item => convertAndRoundValue(item[configObj.columns.primary.name], roundToPlace)))
-    )
+    let domainNums = Array.from(new Set(dataSet?.map(item => item[configObj.columns.primary.name])))
       .filter(d => typeof d === 'number' && !isNaN(d))
-      .sort((a, b) => (a as number) - (b as number))
+      .sort((a, b) => a - b)
 
     let specialClasses = 0
     let specialClassesHash = {}
@@ -116,6 +108,12 @@ export const generateRuntimeLegend = (
                   label: specialClass.label
                 })
 
+                result.items[result.items.length - 1].color = applyColorToLegend(
+                  result.items.length - 1,
+                  configObj,
+                  result.items
+                )
+
                 specialClasses += 1
               }
 
@@ -124,7 +122,7 @@ export const generateRuntimeLegend = (
               // color the configObj if val is in row
               specialColor = result.items.findIndex(p => p.value === val)
 
-              newLegendMemo.set(String(hashObj(row)), specialColor)
+              newLegendMemo.set(hashObj(row), specialColor)
 
               return false
             }
@@ -146,14 +144,14 @@ export const generateRuntimeLegend = (
         if (undefined === value) continue
 
         if (false === uniqueValues.has(value)) {
-          uniqueValues.set(value, [String(hashObj(row))])
+          uniqueValues.set(value, [hashObj(row)])
           count++
         } else {
-          uniqueValues.get(value).push(String(hashObj(row)))
+          uniqueValues.get(value).push(hashObj(row))
         }
       }
 
-      let sorted = Array.from(uniqueValues.keys())
+      let sorted = [...uniqueValues.keys()]
 
       if (legend.additionalCategories) {
         legend.additionalCategories.forEach(additionalCategory => {
@@ -191,103 +189,54 @@ export const generateRuntimeLegend = (
         let arr = uniqueValues.get(val)
 
         if (arr) {
-          arr.forEach(hashedRow => newLegendMemo.set(String(hashedRow), lastIdx))
+          arr.forEach(hashedRow => newLegendMemo.set(hashedRow, lastIdx))
         }
       })
 
-      // before returning the legend result
-      // add property for bin number and set to index location
-      setBinNumbers(result)
-
-      // Store original legend items with their indices before sorting
-      const originalCategoricalItems = result.items.map((item, index) => ({
-        item: { ...item }, // Create a copy to avoid reference issues
-        originalIndex: index
-      }))
-
-      // Move all special legend items from "Special Classes"  to the end of the legend
-      sortSpecialClassesLast(result, legend)
-
-      // Update legend memo to reflect new positions after sorting for categorical legends
-      if (legend.showSpecialClassesLast) {
-        const updatedLegendMemo = new Map()
+      // Add color to new legend item (normal items only, not special classes)
+      for (let i = 0; i < result.items.length; i++) {
+        if (!result.items[i].special) {
+          result.items[i].color = applyColorToLegend(i, configObj, result.items)
+        }
+      }
 
-        // Create a mapping from old index to new index
-        const indexMapping = new Map()
+      // Now apply special class colors last, to overwrite if needed
+      for (let i = 0; i < result.items.length; i++) {
+        if (result.items[i].special) {
+          result.items[i].color = applyColorToLegend(i, configObj, result.items)
+        }
+      }
 
-        // For each item in the new sorted order, find its original position
-        result.items.forEach((newItem, newIndex) => {
-          const originalData = originalCategoricalItems.find(({ item }) => {
-            if (newItem.special) {
-              return item.special && item.value === newItem.value
-            } else {
-              return !item.special && item.value === newItem.value
-            }
+      // Overwrite legendMemo for special class rows to ensure correct color lookup
+      result.items.forEach((item, idx) => {
+        if (item.special) {
+          // Find all rows in the data that match this special class value
+          let specialRows = data.filter(row => {
+            // If special class has a key, use it, otherwise use primaryColName
+            const key = legend.specialClasses.find(sc => String(sc.value) === String(item.value))?.key || primaryColName
+            return String(row[key]) === String(item.value)
           })
+          specialRows.forEach(row => {
+            newLegendMemo.set(hashObj(row), idx)
+          })
+        }
+      })
 
-          if (originalData) {
-            indexMapping.set(originalData.originalIndex, newIndex)
-          }
-        })
-
-        // Update all memo entries using the index mapping
-        newLegendMemo.forEach((originalIndex, rowHash) => {
-          const newIndex = indexMapping.get(originalIndex)
-          if (newIndex !== undefined) {
-            updatedLegendMemo.set(rowHash, newIndex)
-          } else {
-            // Fallback: clamp to valid range
-            const clampedIndex = Math.min(originalIndex, result.items.length - 1)
-            updatedLegendMemo.set(rowHash, clampedIndex)
-          }
-        })
-
-        legendMemo.current = updatedLegendMemo
-
-        // Apply colors based on original positions before sorting for categorical legends
-        for (let i = 0; i < result.items.length; i++) {
-          const currentItem = result.items[i]
+      legendMemo.current = newLegendMemo
 
-          // Find the original position of this item
-          const originalData = originalCategoricalItems.find(({ item }) => {
-            if (currentItem.special) {
-              return item.special && item.value === currentItem.value
-            } else {
-              return !item.special && item.value === currentItem.value
-            }
-          })
+      // before returning the legend result
+      // add property for bin number and set to index location
+      setBinNumbers(result)
 
-          if (originalData) {
-            // Use the original index for color calculation to maintain proper color sequence
-            const contextArray = originalCategoricalItems.slice(0, originalData.originalIndex + 1).map(o => o.item)
-            const appliedColor = applyColorToLegend(originalData.originalIndex, configObj, contextArray)
-            result.items[i].color = appliedColor
-          } else {
-            // Fallback: apply color normally
-            const contextArray = result.items.slice(0, i + 1)
-            const appliedColor = applyColorToLegend(i, configObj, contextArray)
-            result.items[i].color = appliedColor
-          }
-        }
-      } else {
-        // Simple case: no special sorting, just apply colors normally
-        legendMemo.current = newLegendMemo
-
-        for (let i = 0; i < result.items.length; i++) {
-          // Create a context array that simulates the original incremental state
-          const contextArray = result.items.slice(0, i + 1)
-          const appliedColor = applyColorToLegend(i, configObj, contextArray)
-          result.items[i].color = appliedColor
-        }
-      }
+      // Move all special legend items from "Special Classes"  to the end of the legend
+      sortSpecialClassesLast(result, legend)
 
       const assignSpecialClassLastIndex = (value, key) => {
         const newIndex = result.items.findIndex(d => d.bin === value)
         newLegendSpecialClassLastMemo.set(key, newIndex)
       }
 
-      // Use the current legend memo (which might have been updated after sorting)
-      legendMemo.current.forEach(assignSpecialClassLastIndex)
+      newLegendMemo.forEach(assignSpecialClassLastIndex)
       legendSpecialClassLastMemo.current = newLegendSpecialClassLastMemo
 
       return result
@@ -304,26 +253,30 @@ export const generateRuntimeLegend = (
     if (true === legend.separateZero && !general.equalNumberOptIn) {
       let addLegendItem = false
 
-      // First, add the zero bucket
-      result.items.push({
-        min: 0,
-        max: 0
-      })
-
-      // Then process zero values and assign them to the zero bucket (index 0)
       for (let i = 0; i < dataSet.length; i++) {
         if (dataSet[i][primaryColName] === 0) {
           addLegendItem = true
 
           let row = dataSet.splice(i, 1)[0]
 
-          newLegendMemo.set(String(hashObj(row)), 0) // Assign to the zero bucket at index 0
+          newLegendMemo.set(hashObj(row), result.items.length)
           i--
         }
       }
 
       if (addLegendItem) {
         legendNumber -= 1 // This zero takes up one legend item
+
+        // Add new legend item
+        result.items.push({
+          min: 0,
+          max: 0
+        })
+
+        let lastIdx = result.items.length - 1
+
+        // Add color to new legend item
+        result.items[lastIdx].color = applyColorToLegend(lastIdx, configObj, result.items)
       }
     }
 
@@ -365,7 +318,7 @@ export const generateRuntimeLegend = (
 
           // eslint-disable-next-line
           removedRows.forEach(row => {
-            newLegendMemo.set(String(hashObj(row)), result.items.length)
+            newLegendMemo.set(hashObj(row), result.items.length)
           })
 
           result.items.push({
@@ -373,25 +326,62 @@ export const generateRuntimeLegend = (
             max
           })
 
+          result.items[result.items.length - 1].color = applyColorToLegend(
+            result.items.length - 1,
+            configObj,
+            result.items
+          )
+
           changingNumber -= 1
           numberOfRows -= chunkAmt
         }
       } else {
-        // Use the appropriate rounding precision
-        const roundingPrecision =
-          general?.equalNumberOptIn && columns?.primary?.roundToPlace !== undefined
-            ? Number(columns.primary.roundToPlace)
-            : roundToPlace
+        const paletteName = configObj.general?.palette?.name || configObj.color
+        const version = getColorPaletteVersion(configObj)
+        let colors = colorPalettes?.[`v${version}`]?.[paletteName]
+        // Fallback to a default palette if none is selected or found
+        if (!colors) {
+          const defaultPalette = version === 1 ? 'sequential_blue_green' : 'sequential_blue'
+          colors = colorPalettes?.[`v${version}`]?.[defaultPalette]
+        }
+
+        if (!colors) {
+          console.warn('No color palette found, using fallback colors')
+          colors = ['#d3d3d3', '#a0a0a0', '#707070', '#404040'] // Gray fallback
+        }
 
-        let colors = colorPalettes[configObj.color]
-        let colorRange = colors.slice(0, legend.numberOfItems)
+        // Check if we should use v2 distribution logic for better contrast
+        const isSequentialOrDivergent =
+          paletteName && (paletteName.includes('sequential') || paletteName.includes('divergent'))
+        const useV2Distribution =
+          version === 2 && isSequentialOrDivergent && colors.length === 9 && legend.numberOfItems <= 9
+
+        let colorRange
+        if (useV2Distribution && v2ColorDistribution[legend.numberOfItems]) {
+          // Use strategic color distribution for v2 sequential/divergent palettes
+          const distributionIndices = v2ColorDistribution[legend.numberOfItems]
+          colorRange = distributionIndices.map(index => colors[index])
+        } else {
+          // Use existing logic for v1 palettes and other cases
+          colorRange = colors.slice(0, legend.numberOfItems)
+        }
 
         const getDomain = () => {
-          return _.uniq(dataSet.map(item => convertAndRoundValue(item[columns.primary.name], roundingPrecision)))
+          // backwards compatibility
+          if (columns?.primary?.roundToPlace !== undefined && general?.equalNumberOptIn) {
+            return _.uniq(
+              dataSet.map(item => Number(item[columns.primary.name]).toFixed(Number(columns?.primary?.roundToPlace)))
+            )
+          }
+          return _.uniq(dataSet.map(item => Math.round(Number(item[columns.primary.name]))))
         }
 
         const getBreaks = scale => {
-          return scale.quantiles().map(b => convertAndRoundValue(b, roundingPrecision))
+          // backwards compatibility
+          if (columns?.primary?.roundToPlace !== undefined && general?.equalNumberOptIn) {
+            return scale.quantiles().map(b => Number(b)?.toFixed(Number(columns?.primary?.roundToPlace)))
+          }
+          return scale.quantiles().map(item => Number(Math.round(item)))
         }
 
         let scale = d3
@@ -405,125 +395,85 @@ export const generateRuntimeLegend = (
           cachedBreaks = breaks
         }
 
-        // Handle separateZero logic: if separating zero and it's not already included, add it
-        if (legend.separateZero) {
-          // Add zero bucket first if separating zero
-          result.items.push({
-            min: 0,
-            max: 0
-          })
-
-          // Assign all zero values to this bucket
-          dataSet.forEach(row => {
-            let number = convertAndRoundValue(row[columns.primary.name], roundingPrecision)
-            if (number === 0) {
-              newLegendMemo.set(String(hashObj(row)), 0)
-            }
-          })
+        // if separating zero force it into breaks
+        if (cachedBreaks[0] !== 0) {
+          cachedBreaks.unshift(0)
         }
 
-        // Create quantile breaks for non-zero values (or all values if not separating zero)
-        const dataForBreaks = legend.separateZero
-          ? dataSet.filter(row => convertAndRoundValue(row[columns.primary.name], roundingPrecision) !== 0)
-          : dataSet
-
-        if (dataForBreaks.length > 0) {
-          // Recalculate scale and breaks for non-zero data
-          const getNonZeroDomain = () => {
-            return _.uniq(
-              dataForBreaks.map(item => convertAndRoundValue(item[columns.primary.name], roundingPrecision))
-            ).sort((a: number, b: number) => a - b)
-          }
+        // eslint-disable-next-line array-callback-return
+        cachedBreaks.map((item, index) => {
+          const setMin = index => {
+            let min = cachedBreaks[index]
 
-          const nonZeroDomain = getNonZeroDomain()
-          const numberOfBuckets = legend.separateZero ? legend.numberOfItems - 1 : legend.numberOfItems
+            // if first break is a seperated zero, min is zero
+            if (index === 0 && legend.separateZero) {
+              min = 0
+            }
 
-          if (nonZeroDomain.length > 0 && numberOfBuckets > 0) {
-            let nonZeroScale = d3
-              .scaleQuantile()
-              .domain(nonZeroDomain)
-              .range(colorPalettes[configObj.color].slice(0, numberOfBuckets))
+            // if we're on the second break, and separating out zero, increment min to 1.
+            if (index === 1 && legend.separateZero) {
+              min = 1
+            }
 
-            const quantileBreaks = nonZeroScale.quantiles().map(b => convertAndRoundValue(b, roundingPrecision))
+            // For non-first ranges, add small increment to prevent overlap
+            if (index > 0 && !legend.separateZero) {
+              const decimalPlace = Number(configObj?.columns?.primary?.roundToPlace) || 1
+              min = Number(cachedBreaks[index]) + Math.pow(10, -decimalPlace)
+            }
 
-            // Create buckets based on quantile breaks
-            const createBuckets = () => {
-              const buckets = []
-              const sortedDomain = nonZeroDomain.sort((a: number, b: number) => a - b)
+            return min
+          }
 
-              if (quantileBreaks.length === 0) {
-                // Single bucket case
-                buckets.push({
-                  min: sortedDomain[0],
-                  max: sortedDomain[sortedDomain.length - 1]
-                })
-              } else {
-                // First bucket: min value to first break
-                buckets.push({
-                  min: sortedDomain[0],
-                  max: quantileBreaks[0]
-                })
+          const getDecimalPlace = n => {
+            return Math.pow(10, -n)
+          }
 
-                // Middle buckets: previous break + increment to current break
-                for (let i = 1; i < quantileBreaks.length; i++) {
-                  const increment = Math.pow(10, -roundingPrecision)
-                  buckets.push({
-                    min: convertAndRoundValue(quantileBreaks[i - 1] + increment, roundingPrecision),
-                    max: quantileBreaks[i]
-                  })
-                }
+          const setMax = index => {
+            let max = Number(breaks[index + 1])
 
-                // Last bucket: last break + increment to max value
-                if (quantileBreaks.length > 0) {
-                  const increment = Math.pow(10, -roundingPrecision)
-                  buckets.push({
-                    min: convertAndRoundValue(quantileBreaks[quantileBreaks.length - 1] + increment, roundingPrecision),
-                    max: sortedDomain[sortedDomain.length - 1]
-                  })
-                }
-              }
-
-              return buckets
+            if (index === 0 && legend.separateZero) {
+              max = 0
             }
 
-            const buckets = createBuckets()
+            if (index + 1 === breaks.length) {
+              max = Number(domainNums[domainNums.length - 1])
+            }
 
-            // Add buckets to result
-            buckets.forEach(bucket => {
-              result.items.push(bucket)
-            })
+            return max
+          }
 
-            // Assign non-zero values to appropriate buckets
-            dataForBreaks.forEach(row => {
-              let number = convertAndRoundValue(row[columns.primary.name], roundingPrecision)
-              let assigned = false
+          let min = setMin(index)
+          let max = setMax(index)
 
-              for (let itemIndex = legend.separateZero ? 1 : 0; itemIndex < result.items.length; itemIndex++) {
-                const item = result.items[itemIndex]
+          result.items.push({
+            min,
+            max
+          })
+          result.items[result.items.length - 1].color = applyColorToLegend(
+            result.items.length - 1,
+            configObj,
+            result.items
+          )
 
-                if (item.min === undefined || item.max === undefined) continue
+          dataSet.forEach(row => {
+            let number = row[columns.primary.name]
+            let updated = result.items.length - 1
 
-                if (number >= item.min && number <= item.max) {
-                  newLegendMemo.set(String(hashObj(row)), itemIndex)
-                  assigned = true
-                  break
-                }
-              }
+            if (result.items?.[updated]?.min === undefined || result.items?.[updated]?.max === undefined) return
 
-              // Fallback assignment if not assigned
-              if (!assigned) {
-                console.warn('Non-zero value not assigned to any range:', number)
-                const fallbackIndex = legend.separateZero ? 1 : 0
-                newLegendMemo.set(String(hashObj(row)), fallbackIndex)
+            // Check if this row hasn't been assigned yet to prevent double assignment
+            if (!newLegendMemo.has(hashObj(row))) {
+              if (number >= result.items[updated].min && number <= result.items[updated].max) {
+                newLegendMemo.set(hashObj(row), updated)
               }
-            })
-          }
-        }
+            }
+          })
+        })
 
         // Final pass: handle any unassigned rows
         dataSet.forEach(row => {
-          if (!newLegendMemo.has(String(hashObj(row)))) {
-            let number = convertAndRoundValue(row[columns.primary.name], roundingPrecision)
+          if (!newLegendMemo.has(hashObj(row))) {
+            let number = row[columns.primary.name]
             let assigned = false
 
             // Find the correct range for this value - check both boundaries
@@ -534,7 +484,7 @@ export const generateRuntimeLegend = (
 
               // Check if value falls within range (inclusive of both min and max)
               if (number >= item.min && number <= item.max) {
-                newLegendMemo.set(String(hashObj(row)), itemIndex)
+                newLegendMemo.set(hashObj(row), itemIndex)
                 assigned = true
                 break
               }
@@ -555,7 +505,7 @@ export const generateRuntimeLegend = (
                 }
               }
 
-              newLegendMemo.set(String(hashObj(row)), closestIndex)
+              newLegendMemo.set(hashObj(row), closestIndex)
             }
           }
         })
@@ -591,7 +541,7 @@ export const generateRuntimeLegend = (
 
         // Add rows in dataSet that belong to this new legend item since we've got the data sorted
         while (pointer < dataSet.length && dataSet[pointer][primaryColName] <= max) {
-          newLegendMemo.set(String(hashObj(dataSet[pointer])), result.items.length)
+          newLegendMemo.set(hashObj(dataSet[pointer]), result.items.length)
           pointer += 1
         }
 
@@ -601,11 +551,19 @@ export const generateRuntimeLegend = (
         }
 
         result.items.push(range)
+
+        result.items[result.items.length - 1].color = applyColorToLegend(
+          result.items.length - 1,
+          configObj,
+          result.items
+        )
       }
     }
 
     setBinNumbers(result)
 
+    legendMemo.current = newLegendMemo
+
     if (general.geoType === 'world') {
       const runtimeDataKeys = Object.keys(runtimeData)
       const isCountriesWithNoDataState =
@@ -621,129 +579,23 @@ export const generateRuntimeLegend = (
     }
 
     setBinNumbers(result)
-
-    // Only do complex sorting and color mapping if showSpecialClassesLast is enabled
-    if (legend.showSpecialClassesLast) {
-      // Store original legend items with their indices before sorting
-      const originalItems = result.items.map((item, index) => ({
-        item: { ...item }, // Create a copy to avoid reference issues
-        originalIndex: index
-      }))
-
-      sortSpecialClassesLast(result, legend)
-
-      // Update legend memo to reflect new positions after sorting
-      const updatedLegendMemo = new Map()
-
-      // Create a mapping from old index to new index
-      const indexMapping = new Map()
-
-      // For each item in the new sorted order, find its original position
-      result.items.forEach((newItem, newIndex) => {
-        const originalData = originalItems.find(({ item }) => {
-          if (newItem.special) {
-            return item.special && item.value === newItem.value
-          } else {
-            return !item.special && item.min === newItem.min && item.max === newItem.max
-          }
-        })
-
-        if (originalData) {
-          indexMapping.set(originalData.originalIndex, newIndex)
-        }
-      })
-
-      // Update all memo entries using the index mapping
-      newLegendMemo.forEach((originalIndex, rowHash) => {
-        const newIndex = indexMapping.get(originalIndex)
-        if (newIndex !== undefined) {
-          updatedLegendMemo.set(rowHash, newIndex)
-        } else {
-          // For unmapped entries, check if it was originally a special class
-          const originalItem = originalItems[originalIndex]?.item
-          if (originalItem?.special) {
-            // Find the special class in its new position
-            const specialIndex = result.items.findIndex(item => item.special && item.value === originalItem.value)
-            if (specialIndex !== -1) {
-              updatedLegendMemo.set(rowHash, specialIndex)
-            } else {
-              // Fallback: clamp to valid range
-              const clampedIndex = Math.min(originalIndex, result.items.length - 1)
-              updatedLegendMemo.set(rowHash, clampedIndex)
-            }
-          } else {
-            // Fallback: clamp to valid range
-            const clampedIndex = Math.min(originalIndex, result.items.length - 1)
-            updatedLegendMemo.set(rowHash, clampedIndex)
-          }
-        }
-      })
-
-      legendMemo.current = updatedLegendMemo
-
-      // Apply colors based on original positions to maintain proper color sequence
-      for (let i = 0; i < result.items.length; i++) {
-        const currentItem = result.items[i]
-
-        // Find the original position of this item
-        const originalData = originalItems.find(({ item }) => {
-          if (currentItem.special) {
-            return item.special && item.value === currentItem.value
-          } else {
-            return !item.special && item.min === currentItem.min && item.max === currentItem.max
-          }
-        })
-
-        if (originalData) {
-          // Use the original index for color calculation to maintain proper color sequence
-          const contextArray = originalItems.slice(0, originalData.originalIndex + 1).map(o => o.item)
-          const appliedColor = applyColorToLegend(originalData.originalIndex, configObj, contextArray)
-          result.items[i].color = appliedColor
-        } else {
-          // Fallback: apply color normally
-          const contextArray = result.items.slice(0, i + 1)
-          const appliedColor = applyColorToLegend(i, configObj, contextArray)
-          result.items[i].color = appliedColor
-        }
-      }
-
-      // Final step: Ensure special class rows are correctly mapped to their legend items
-      result.items.forEach((item, idx) => {
-        if (item.special) {
-          // Find all rows in the original data that match this special class value
-          let specialRows = data.filter(row => {
-            // If special class has a key, use it, otherwise use primaryColName
-            const key = legend.specialClasses.find(sc => String(sc.value) === String(item.value))?.key || primaryColName
-            return String(row[key]) === String(item.value)
-          })
-          specialRows.forEach(row => {
-            legendMemo.current.set(String(hashObj(row)), idx)
-          })
-        }
-      })
-    } else {
-      legendMemo.current = newLegendMemo
-
-      for (let i = 0; i < result.items.length; i++) {
-        const contextArray = result.items.slice(0, i + 1)
-        const appliedColor = applyColorToLegend(i, configObj, contextArray)
-        result.items[i].color = appliedColor
-      }
-    }
+    sortSpecialClassesLast(result, legend)
 
     const assignSpecialClassLastIndex = (value, key) => {
       const newIndex = result.items.findIndex(d => d.bin === value)
       newLegendSpecialClassLastMemo.set(key, newIndex)
     }
-
-    // Use the current legend memo (which might have been updated after sorting)
-    legendMemo.current.forEach(assignSpecialClassLastIndex)
+    newLegendMemo.forEach(assignSpecialClassLastIndex)
     legendSpecialClassLastMemo.current = newLegendSpecialClassLastMemo
 
     return result
   } catch (e) {
     console.error(e)
-    return []
+    return {
+      fromHash: null,
+      runtimeDataHash: null,
+      items: []
+    }
   }
 }