@cdc/core 4.25.10 → 4.25.11

package/components/DataTable/components/DataTableEditorPanel.tsx

@@ -34,7 +34,17 @@ const DataTableEditorPanel: React.FC<DataTableEditorProps> = ({ config, updateCo
     })
   }
 
-  const columns = Object.keys(config.originalFormattedData?.[0] || {})
+  const columns = Object.keys(
+    config.originalFormattedData?.[0] || config.formattedData?.[0] || config.data?.[0] || {}
+  )
+  // If no data is available, fallback to column names from config.columns
+  const columnsFromConfig = config.columns
+    ? Object.values(config.columns)
+        .map(col => col.name)
+        .filter(Boolean)
+    : []
+  const finalColumns = columns.length > 0 ? columns : columnsFromConfig
+
   return (
     <Accordion allowZeroExpanded={true}>
       <AccordionItem>
@@ -63,7 +73,7 @@ const DataTableEditorPanel: React.FC<DataTableEditorProps> = ({ config, updateCo
           <AccordionItemButton>Data Table</AccordionItemButton>
         </AccordionItemHeading>
         <AccordionItemPanel>
-          <DataTableEditor config={config} columns={columns} updateField={updateField} isDashboard={true} />
+          <DataTableEditor config={config} columns={finalColumns} updateField={updateField} isDashboard={true} />
         </AccordionItemPanel>
       </AccordionItem>
       <AccordionItem>

package/components/DataTable/data-table.css

@@ -166,6 +166,12 @@ table.data-table {
     text-decoration: none;
   }
 
+  td div a {
+    position: relative;
+    padding: 0;
+    display: inline;
+  }
+
   td span.table-link {
     text-decoration: underline;
     cursor: pointer;

package/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
 

package/components/DataTable/helpers/standardizeState.js

@@ -8,8 +8,8 @@ const states = {
   CO: 'Colorado',
   CT: 'Connecticut',
   DE: 'Delaware',
-  DC: 'District Of Columbia',
-  FM: 'Federated States Of Micronesia',
+  DC: 'District of Columbia',
+  FM: 'Federated States of Micronesia',
   FL: 'Florida',
   GA: 'Georgia',
   GU: 'Guam',

package/components/DataTable/helpers/tests/standardizeState.test.js

@@ -0,0 +1,54 @@
+import { standardizeStateName } from '../standardizeState'
+
+describe('standardizeStateName', () => {
+  it('should return non-string values unchanged', () => {
+    expect(standardizeStateName(123)).toBe(123)
+    expect(standardizeStateName(null)).toBe(null)
+    expect(standardizeStateName(undefined)).toBe(undefined)
+    expect(standardizeStateName(true)).toBe(true)
+  })
+
+  it('should return numeric strings unchanged', () => {
+    expect(standardizeStateName('123')).toBe('123')
+    expect(standardizeStateName('456.78')).toBe('456.78')
+  })
+
+  it('should convert state abbreviations to full names', () => {
+    expect(standardizeStateName('DC')).toBe('District of Columbia')
+    expect(standardizeStateName('dc')).toBe('District of Columbia')
+    expect(standardizeStateName('CA')).toBe('California')
+    expect(standardizeStateName('ca')).toBe('California')
+    expect(standardizeStateName('FM')).toBe('Federated States of Micronesia')
+    expect(standardizeStateName('fm')).toBe('Federated States of Micronesia')
+  })
+
+  it('should handle Virgin Islands variations', () => {
+    expect(standardizeStateName('VI')).toBe('U.S. VIRGIN ISLANDS')
+    expect(standardizeStateName('vi')).toBe('U.S. VIRGIN ISLANDS')
+    expect(standardizeStateName('Virgin Islands')).toBe('U.S. VIRGIN ISLANDS')
+    expect(standardizeStateName('VIRGIN ISLANDS')).toBe('U.S. VIRGIN ISLANDS')
+    expect(standardizeStateName('U.S. Virgin Islands')).toBe('U.S. VIRGIN ISLANDS')
+    expect(standardizeStateName('US VIRGIN ISLANDS')).toBe('U.S. VIRGIN ISLANDS')
+  })
+
+  it('should verify "of" is lowercase in state names', () => {
+    const dcName = standardizeStateName('DC')
+    expect(dcName).toContain('of')
+    expect(dcName).not.toContain('Of')
+
+    const fmName = standardizeStateName('FM')
+    expect(fmName).toContain('of')
+    expect(fmName).not.toContain('Of')
+  })
+
+  it('should return original value for unknown state codes', () => {
+    expect(standardizeStateName('ZZ')).toBe('ZZ')
+    expect(standardizeStateName('Unknown State')).toBe('Unknown State')
+  })
+
+  it('should handle mixed case state names', () => {
+    expect(standardizeStateName('California')).toBe('California')
+    expect(standardizeStateName('CALIFORNIA')).toBe('CALIFORNIA')
+    expect(standardizeStateName('cAlIfOrNiA')).toBe('cAlIfOrNiA')
+  })
+})

package/components/EditorPanel/DataTableEditor.tsx

@@ -21,9 +21,9 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
   const isLoadedFromUrl = config.dataKey?.includes('http://') || config?.dataKey?.includes('https://')
   const excludedColumns = useMemo(() => {
     return Object.keys(config.columns)
-      .map<[string, boolean]>(key => [key, config.columns[key].dataTable])
-      .filter(([key, dataTable]) => !dataTable)
-      .map(([key]) => key)
+      .map<[string, boolean]>(key => [config.columns[key].name, config.columns[key].dataTable])
+      .filter(([columnName, dataTable]) => !dataTable && columnName) // also filter out undefined names
+      .map(([columnName]) => columnName)
   }, [config.columns])
 
   const groupPivotColumns = useMemo(() => {

package/components/EditorPanel/EditorPanel.styles.css

@@ -0,0 +1,423 @@
+/* EditorPanel component styles */
+/* Shared editor panel component styles used across all visualization packages */
+
+/* Color palette in editor panel context */
+.editor-panel .header .color-palette li {
+  width: 1.5em;
+  height: 1.5em;
+  display: inline-block;
+}
+
+.editor-panel .color-palette {
+  display: flex;
+}
+
+.editor-panel .color-palette li {
+  width: 1.5em;
+  height: 1.5em;
+  display: inline-block;
+  margin-right: 0.5em;
+  cursor: pointer;
+  border: rgba(0, 0, 0, 0.3) 3px solid;
+}
+
+.editor-panel .color-palette li.active {
+  border: rgba(0, 0, 0, 0.8) 3px solid;
+}
+
+.editor-panel .color-palette a {
+  display: inline-block;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.8);
+}
+
+.editor-panel .color-palette.series-list {
+  flex-direction: column;
+  padding: 0;
+  border: none;
+}
+
+.editor-panel .color-palette.series-list li {
+  padding: 0.3em 0.5em;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: auto;
+  height: auto;
+  border: 0;
+}
+
+.editor-panel .color-palette.series-list li:not(:last-child) {
+  border-bottom: rgba(0, 0, 0, 0.2) 1px solid;
+}
+
+.editor-panel .form-container {
+  border-right: var(--lightGray) 1px solid;
+  flex-grow: 1;
+}
+
+.editor-panel .guidance-link {
+  margin: 2em 1em 0;
+  padding: 0.75em 1em;
+}
+
+.editor-panel .guidance-link svg {
+  width: 60px;
+  color: var(--blue);
+  margin-right: 1rem;
+  height: 60px;
+}
+
+.editor-panel .guidance-link svg path {
+  fill: currentColor;
+}
+
+.editor-panel .warning {
+  color: #d8000c;
+  background-color: #ffd2d2;
+  padding: 0.75em 1em;
+  margin: 1em 0;
+  font-size: 0.8em;
+  border: #d8000c 1px solid;
+  border-radius: 0.4em;
+}
+
+.editor-panel .warning strong {
+  font-weight: 600;
+  display: block;
+}
+
+.editor-panel .advanced {
+  padding: 0 1em 1em;
+  text-align: left;
+}
+
+.editor-panel .advanced p {
+  font-size: 0.8rem;
+}
+
+.editor-panel .advanced .advanced-toggle-link {
+  padding-top: 1em;
+  display: block;
+  text-align: left;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.editor-panel .advanced .advanced-toggle-link span {
+  text-decoration: none;
+  display: inline-block;
+  font-family: monospace;
+  padding-right: 5px;
+}
+
+.editor-panel .advanced .advanced-toggle-link:hover {
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.editor-panel .advanced textarea {
+  height: 400px;
+  width: 100%;
+  font-size: 0.9em;
+  padding: 0.5em;
+  font-family: monospace;
+  box-sizing: border-box;
+}
+
+.editor-panel .heading-2 {
+  background: #565656;
+  color: #fff;
+  font-size: 1.1em;
+  padding: 0.6em 1em;
+  position: relative;
+  border-bottom: #565656 3px solid;
+  z-index: 3;
+}
+
+.editor-panel label {
+  text-transform: uppercase;
+  display: block;
+  font-size: 0.8em;
+  font-weight: 600;
+}
+
+.editor-panel label:not(:first-child) {
+  margin-top: 1em;
+}
+
+.editor-panel label span.edit-label {
+  margin-bottom: 0.3em;
+  display: block;
+}
+
+.editor-panel label span.column-heading {
+  font-size: 1em;
+}
+
+.editor-panel label.checkbox {
+  display: flex;
+}
+
+.editor-panel label.checkbox span {
+  text-transform: none;
+  font-size: 1em;
+  font-weight: 400;
+}
+
+.editor-panel label.checkbox input {
+  margin-top: 0;
+  margin-right: 0.5em;
+}
+
+.editor-panel input[type='checkbox'],
+.editor-panel input[type='radio'] {
+  display: inline-block;
+  width: auto !important;
+  height: auto !important;
+  padding: 0;
+  margin-right: 0.5em;
+  cursor: pointer;
+  user-select: none;
+}
+
+.editor-panel input[type='text'],
+.editor-panel input[role='combobox'],
+.editor-panel input[type='number'],
+.editor-panel textarea {
+  padding: 0.5em;
+  width: 100%;
+}
+
+.editor-panel fieldset {
+  padding-left: 0;
+}
+
+.editor-panel .primary-fieldset {
+  border-top: rgba(0, 0, 0, 0.3) 2px solid;
+  padding-top: 2em;
+  margin-top: 2em;
+}
+
+.editor-panel ul.column-edit {
+  list-style: none;
+}
+
+.editor-panel ul.column-edit li {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 0.3em 0;
+}
+
+.editor-panel ul.column-edit li label {
+  display: inline-block;
+  width: 48%;
+}
+
+.editor-panel ul.column-edit li label:nth-child(odd) {
+  margin-top: 1em;
+}
+
+.editor-panel ul.column-edit.three-col li label {
+  width: 31%;
+}
+
+.editor-panel .edit-block {
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  padding: 1em;
+  margin-top: 1em;
+  position: relative;
+}
+
+.editor-panel .edit-block .remove-column {
+  position: absolute;
+  top: 0;
+  right: 0;
+  border: 0;
+  background: rgba(0, 0, 0, 0.1);
+  color: #000;
+  font-size: 0.8em;
+  padding: 0.3em;
+  cursor: pointer;
+}
+
+.editor-panel span.subtext {
+  text-transform: none;
+  display: block;
+  font-size: 0.8em;
+  font-weight: 400;
+}
+
+.editor-panel .sort-list {
+  list-style: none;
+}
+
+.editor-panel .sort-list li {
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  padding: 0.3em;
+  display: flex;
+  align-items: center;
+  cursor: move;
+  margin-bottom: 0.3em;
+}
+
+.editor-panel .sort-list li svg {
+  margin-right: 0.5em;
+}
+
+.editor-panel .info {
+  margin-top: 1em;
+  font-size: 0.9em;
+}
+
+/* React Tags Component styles (third-party library) */
+.editor-panel .react-tags__search {
+  width: 100%;
+}
+
+.editor-panel .react-tags {
+  position: relative;
+  cursor: text;
+}
+
+.editor-panel .react-tags input.react-tags__search-input {
+  font-size: 0.8rem;
+}
+
+.editor-panel .react-tags span {
+  display: inline;
+}
+
+.editor-panel .react-tags.is-focused {
+  border-color: rgba(0, 0, 0, 0.7);
+}
+
+.editor-panel .react-tags__selected {
+  display: inline;
+}
+
+.editor-panel .react-tags__selected-tag {
+  display: inline-block;
+  box-sizing: border-box;
+  border: 1px solid #d1d1d1;
+  border-radius: 2px;
+  background: #f1f1f1;
+  padding: 0.4em 0.6em;
+  font-size: 0.8em;
+  margin-right: 0.3em;
+  margin-bottom: 0.3em;
+}
+
+.editor-panel .react-tags__selected-tag:after {
+  content: '\2715';
+  color: #aaa;
+  margin-left: 8px;
+}
+
+.editor-panel .react-tags__selected-tag:hover,
+.editor-panel .react-tags__selected-tag:focus {
+  border-color: #b1b1b1;
+}
+
+.editor-panel .react-tags__search {
+  display: inline-block;
+  max-width: 100%;
+}
+
+@media screen and (min-width: 30em) {
+  .editor-panel .react-tags__search {
+    position: relative;
+  }
+}
+
+.editor-panel .react-tags__search input {
+  max-width: 100%;
+  margin: 0;
+  outline: none;
+  padding: 0.5em 0.3em;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.editor-panel .react-tags__search input::-ms-clear {
+  display: none;
+}
+
+.editor-panel .react-tags__suggestions {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+}
+
+@media screen and (min-width: 30em) {
+  .editor-panel .react-tags__suggestions {
+    width: 240px;
+  }
+}
+
+.editor-panel .react-tags__suggestions ul {
+  margin: 4px -1px;
+  padding: 0;
+  list-style: none;
+  background: white;
+  border: 1px solid #d1d1d1;
+  border-radius: 2px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+}
+
+.editor-panel .react-tags__suggestions li {
+  border-bottom: 1px solid #ddd;
+  padding: 6px 8px;
+}
+
+.editor-panel .react-tags__suggestions li mark {
+  text-decoration: underline;
+  background: none;
+  font-weight: 600;
+}
+
+.editor-panel .react-tags__suggestions li:hover {
+  cursor: pointer;
+  background: #eee;
+}
+
+.editor-panel .react-tags__suggestions li.is-active {
+  background: #b7cfe0;
+}
+
+.editor-panel .react-tags__suggestions li.is-disabled {
+  opacity: 0.5;
+  cursor: auto;
+}
+
+.editor-toggle {
+  position: fixed;
+  top: 1em;
+  right: 1em;
+  background: var(--blue);
+  color: white;
+  border: 0;
+  border-radius: 0.5em;
+  padding: 0.5em 1em;
+  font-size: 1em;
+  cursor: pointer;
+  z-index: 9999999999;
+  display: none;
+}
+
+.editor-toggle.active {
+  display: block;
+}
+
+.editor-toggle:hover {
+  background: var(--darkBlue);
+}
+
+.editor-toggle svg {
+  height: 1em;
+  width: 1em;
+}
+
+.editor-toggle svg path {
+  fill: currentColor;
+}