fix: table and tooltip title casing fix (#2386)

adamdoe · web-flow · commit 2786bcc34275 · 2025-11-05T11:51:22.000-08:00
diff --git a/packages/core/components/DataTable/helpers/mapCellMatrix.tsx b/packages/core/components/DataTable/helpers/mapCellMatrix.tsx
@@ -12,11 +12,22 @@ type MapRowsProps = DataTableProps & {
   rows: string[]
 }
 
-const getGeoLabel = (config, row, formatLegendLocation, displayGeoName) => {
+const getGeoLabel = (config, row, formatLegendLocation, displayGeoName, runtimeData = null) => {
   const { geoType, type } = config.general
+
   let labelValue
   if (!['single-state', 'us-county'].includes(geoType) || type === 'us-geocode') {
+    // Use the row (UID) for lookup - this allows "US-AL" to become "Alabama"
     labelValue = displayGeoName(row)
+
+    // If displayGeoName returned the same value (not found in lookups), use the raw imported data
+    if (labelValue === row && runtimeData && config.columns?.geo?.name) {
+      const rawGeoValue = runtimeData[row]?.[config.columns.geo.name]
+      if (rawGeoValue && rawGeoValue !== row) {
+        labelValue = rawGeoValue
+      }
+    }
+
     labelValue = String(labelValue).startsWith('region') ? _.capitalize(labelValue) : labelValue
   } else {
     labelValue = formatLegendLocation(row)
@@ -58,7 +69,7 @@ export const getMapRowData = (
     ].map(column => {
       const label = columns[column]?.label || columns[column]?.name || column
       if (column === 'geo') {
-        dataRow[label] = getGeoLabel(config, row, formatLegendLocation, displayGeoName)
+        dataRow[label] = getGeoLabel(config, row, formatLegendLocation, displayGeoName, runtimeData)
       } else if (filterColumns.includes(column)) {
         dataRow[label] = runtimeData[row][column]
       } else {
@@ -100,7 +111,7 @@ const mapCellArray = ({
           if (!legendColor) {
             console.error('No legend color found') // eslint-disable-line no-console
           }
-          const labelValue = getGeoLabel(config, row, formatLegendLocation, displayGeoName)
+          const labelValue = getGeoLabel(config, row, formatLegendLocation, displayGeoName, runtimeData)
           const mapZoomHandler =
             type === 'bubble' && allowMapZoom && geoType === 'world' ? () => setFilteredCountryCode(row) : undefined
 
diff --git a/packages/map/index.html b/packages/map/index.html
@@ -30,7 +30,8 @@
 
 <body>
   <!-- DEFAULT EXAMPLES -->
-  <div class="react-container" data-config="/examples/example-city-state.json"></div>
+  <!-- <div class="react-container" data-config="/examples/example-city-state.json"></div> -->
+  <div class="react-container" data-config="/examples/private/measles.json"></div>
 
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <script type="module" src="./src/index.jsx"></script>
diff --git a/packages/map/src/helpers/displayGeoName.ts b/packages/map/src/helpers/displayGeoName.ts
@@ -4,10 +4,12 @@ import {
   supportedTerritories,
   supportedCountries,
   supportedCounties,
+  supportedCities,
   stateKeys,
   territoryKeys,
   countryKeys,
-  countyKeys
+  countyKeys,
+  cityKeys
 } from '../data/supported-geos'
 
 /**
@@ -20,25 +22,35 @@ import {
 export const displayGeoName = (key: string, convertFipsCodes = true): string => {
   if (!convertFipsCodes) return key
   let value = key
+  let wasLookedUp = false
 
   // Map to first item in values array which is the preferred label
   if (stateKeys.includes(value)) {
     value = titleCase(supportedStates[key][0])
+    wasLookedUp = true
   }
 
   if (territoryKeys.includes(value)) {
     value = titleCase(supportedTerritories[key][0])
+    wasLookedUp = true
     if (value === 'U.s. Virgin Islands') {
       value = 'U.S. Virgin Islands'
     }
   }
 
   if (countryKeys.includes(value)) {
     value = titleCase(supportedCountries[key][0])
+    wasLookedUp = true
   }
 
   if (countyKeys.includes(value)) {
     value = titleCase(supportedCounties[key])
+    wasLookedUp = true
+  }
+
+  if (cityKeys.includes(value)) {
+    value = titleCase(String(value) || '')
+    wasLookedUp = true
   }
 
   const dict = {
@@ -51,11 +63,14 @@ export const displayGeoName = (key: string, convertFipsCodes = true): string =>
 
   if (Object.keys(dict).includes(value)) {
     value = dict[value]
+    wasLookedUp = true
   }
-  // if you get here and it's 2 letters then DONT titleCase state abbreviations like "AL"
-  if (value?.length === 2 || value === 'U.S. Virgin Islands') {
+
+  // If value was looked up from our dictionaries and needs formatting, or if it's a 2-letter abbreviation, return as-is
+  if (value?.length === 2 || value === 'U.S. Virgin Islands' || wasLookedUp) {
     return value
   } else {
+    // Value is user data that wasn't in our lookups - return as-is to preserve original formatting
     return value
   }
 }
