@cdc/core 4.26.2 → 4.26.3

package/components/EditorPanel/CustomSortOrder.tsx

@@ -0,0 +1,94 @@
+import { useCallback, useMemo } from 'react'
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'
+import _ from 'lodash'
+
+type CustomSortOrderProps = {
+  column: string
+  data: Record<string, any>[]
+  customOrder?: string[]
+  updateField: Function
+  /** Optional transform for display labels (e.g. displayGeoName for maps) */
+  displayTransform?: (value: string) => string
+}
+
+/**
+ * Editor component for drag-and-drop custom sort ordering.
+ * Shows unique values from the selected column and allows reordering via DnD.
+ */
+const CustomSortOrder: React.FC<CustomSortOrderProps> = ({
+  column,
+  data,
+  customOrder,
+  updateField,
+  displayTransform
+}) => {
+  // Compute unique values from the selected column
+  const uniqueValues = useMemo(() => {
+    if (!column || !data?.length) return []
+    const values = data.map(row => String(row[column] ?? '')).filter(v => v !== '')
+    return _.uniq(values)
+  }, [column, data])
+
+  // Use customOrder if set, otherwise fall back to natural unique order
+  const orderedValues = useMemo(() => {
+    if (customOrder?.length) {
+      // Include any new values from data that aren't in customOrder
+      const extra = uniqueValues.filter(v => !customOrder.includes(v))
+      return [...customOrder.filter(v => uniqueValues.includes(v)), ...extra]
+    }
+    return uniqueValues
+  }, [customOrder, uniqueValues])
+
+  const handleDragEnd = useCallback(
+    ({ source, destination }) => {
+      if (!destination || source.index === destination.index) return
+      const reordered = [...orderedValues]
+      const [moved] = reordered.splice(source.index, 1)
+      reordered.splice(destination.index, 0, moved)
+      updateField('table', 'defaultSort', 'customOrder', reordered)
+    },
+    [orderedValues, updateField]
+  )
+
+  if (!orderedValues.length) return null
+
+  return (
+    <div>
+      <DragDropContext onDragEnd={handleDragEnd}>
+        <Droppable droppableId='custom_sort_order'>
+          {provided => (
+            <ul
+              {...provided.droppableProps}
+              className='sort-list'
+              ref={provided.innerRef}
+              style={{ marginTop: '0.5em', paddingLeft: 0, listStyle: 'none' }}
+            >
+              {orderedValues.map((value, index) => (
+                <Draggable key={value} draggableId={`customSort-${value}`} index={index}>
+                  {(provided, snapshot) => (
+                    <li style={{ marginBottom: '2px' }}>
+                      <div
+                        className={snapshot.isDragging ? 'currently-dragging' : ''}
+                        style={{
+                          ...provided.draggableProps.style
+                        }}
+                        ref={provided.innerRef}
+                        {...provided.draggableProps}
+                        {...provided.dragHandleProps}
+                      >
+                        {displayTransform ? displayTransform(value) : value}
+                      </div>
+                    </li>
+                  )}
+                </Draggable>
+              ))}
+              {provided.placeholder}
+            </ul>
+          )}
+        </Droppable>
+      </DragDropContext>
+    </div>
+  )
+}
+
+export default CustomSortOrder

package/components/EditorPanel/DataTableEditor.tsx

@@ -7,6 +7,7 @@ import { UpdateFieldFunc } from '../../types/UpdateFieldFunc'
 import { Visualization } from '../../types/Visualization'
 import _ from 'lodash'
 import { Column } from '../../types/Column'
+import CustomSortOrder from './CustomSortOrder'
 
 interface DataTableProps {
   config: Partial<Visualization>
@@ -27,7 +28,7 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
   }, [config.columns])
 
   const groupPivotColumns = useMemo(() => {
-    const columns: string[] = config.data.flatMap(Object.keys)
+    const columns: string[] = (config.data ?? []).flatMap(Object.keys)
     const cols = _.uniq(columns).filter(key => {
       return true
     })
@@ -39,6 +40,56 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
     updateField('table', null, 'groupBy', value)
   }
 
+  const changeSortColumn = (value: string) => {
+    if (value === '' || value === PLACEHOLDER) {
+      // Clear entire defaultSort when column is deselected
+      updateField('table', null, 'defaultSort', {})
+      return
+    }
+    // Set column and reset to ascending, clear custom order
+    updateField('table', null, 'defaultSort', { column: value, sortDirection: 'asc' })
+  }
+
+  const changeSortDirection = (value: string) => {
+    const newDefaultSort = { ...config.table.defaultSort, sortDirection: value }
+    // Clear customOrder when switching away from custom
+    if (value !== 'custom') {
+      delete newDefaultSort.customOrder
+    } else if (!newDefaultSort.customOrder?.length) {
+      // Auto-populate customOrder with unique values so the table updates immediately
+      const col = newDefaultSort.column
+      const dataCol = config.type === 'map' && config.columns?.[col]?.name ? config.columns[col].name : col
+      if (dataCol && config.data?.length) {
+        newDefaultSort.customOrder = _.uniq(config.data.map(row => String(row[dataCol] ?? '')).filter(v => v !== ''))
+      }
+    }
+    updateField('table', null, 'defaultSort', newDefaultSort)
+  }
+
+  // Build sort column options based on visualization type
+  // Maps use config.columns keys (geo, primary, etc.); other types use data column names
+  const sortColumnOptions = useMemo(() => {
+    if (config.type === 'map' && config.columns) {
+      return Object.keys(config.columns)
+        .filter(key => config.columns[key].dataTable !== false && config.columns[key].name)
+        .map(key => ({
+          label: config.columns[key].label || config.columns[key].name || key,
+          value: key
+        }))
+    }
+    return dataColumns.map(col => ({ label: col, value: col }))
+  }, [config.type, config.columns, dataColumns])
+
+  // For custom sort, resolve the actual data column name to get unique values
+  const customSortDataColumn = useMemo(() => {
+    const col = config.table?.defaultSort?.column
+    if (!col) return ''
+    if (config.type === 'map' && config.columns?.[col]?.name) {
+      return config.columns[col].name
+    }
+    return col
+  }, [config.type, config.columns, config.table?.defaultSort?.column])
+
   const excludeColumns = (section, subSection, fieldName, excludedColNames: string[]) => {
     const newColumns = _.cloneDeep(config.columns)
 
@@ -234,6 +285,49 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
           updateField={updateField}
         />
       )}
+      <Select
+        value={config.table.defaultSort?.column || ''}
+        fieldName='column'
+        section='table'
+        subsection='defaultSort'
+        label='Default Sort Column'
+        initial={PLACEHOLDER}
+        options={sortColumnOptions}
+        updateField={(_section, _subSection, _fieldName, value) => changeSortColumn(value)}
+        tooltip={
+          <Tooltip style={{ textTransform: 'none' }}>
+            <Tooltip.Target>
+              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+            </Tooltip.Target>
+            <Tooltip.Content>
+              <p>Choose a column to sort the data table by when it first loads.</p>
+            </Tooltip.Content>
+          </Tooltip>
+        }
+      />
+      {config.table.defaultSort?.column && (
+        <Select
+          value={config.table.defaultSort?.sortDirection || 'asc'}
+          fieldName='sortDirection'
+          section='table'
+          subsection='defaultSort'
+          label='Sort Direction'
+          options={[
+            { label: 'Ascending', value: 'asc' },
+            { label: 'Descending', value: 'desc' },
+            { label: 'Custom', value: 'custom' }
+          ]}
+          updateField={(_section, _subSection, _fieldName, value) => changeSortDirection(value)}
+        />
+      )}
+      {config.table.defaultSort?.column && config.table.defaultSort?.sortDirection === 'custom' && (
+        <CustomSortOrder
+          column={customSortDataColumn}
+          data={config.data}
+          customOrder={config.table.defaultSort.customOrder}
+          updateField={updateField}
+        />
+      )}
       <CheckBox
         value={config.table.download}
         fieldName='download'
@@ -259,6 +353,16 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
             section='table'
             updateField={updateField}
           />
+          <div className='ms-4 mt-2' style={{ maxWidth: 'calc(100% - 1.5rem)' }}>
+            <TextField
+              value={config.table.downloadDataLabel}
+              section='table'
+              fieldName='downloadDataLabel'
+              label='Download Data Link Text'
+              placeholder='Download Data (CSV)'
+              updateField={updateField}
+            />
+          </div>
         </>
       )}
       {isDashboard && config.type !== 'table' && (
@@ -289,28 +393,40 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
         />
       )}
       {config.type !== 'table' && config.table.showDownloadImgButton && (
-        <CheckBox
-          value={config.table.includeContextInDownload}
-          fieldName='includeContextInDownload'
-          className='ms-4'
-          label='Include Heading & Context'
-          section='table'
-          updateField={updateField}
-          tooltip={
-            <Tooltip style={{ textTransform: 'none' }}>
-              <Tooltip.Target>
-                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-              </Tooltip.Target>
-              <Tooltip.Content>
-                <p>
-                  When enabled, the image download will include the section heading (H2 or H3) and any explanatory
-                  paragraphs that appear immediately before the visualization. Be sure to test the image download on the
-                  published page to ensure the correct context is included.
-                </p>
-              </Tooltip.Content>
-            </Tooltip>
-          }
-        />
+        <>
+          <CheckBox
+            value={config.table.includeContextInDownload}
+            fieldName='includeContextInDownload'
+            className='ms-4'
+            label='Include Heading & Context'
+            section='table'
+            updateField={updateField}
+            tooltip={
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  <p>
+                    When enabled, the image download will include the section heading (H2 or H3) and any explanatory
+                    paragraphs that appear immediately before the visualization. Be sure to test the image download on
+                    the published page to ensure the correct context is included.
+                  </p>
+                </Tooltip.Content>
+              </Tooltip>
+            }
+          />
+          <div className='ms-4 mt-2' style={{ maxWidth: 'calc(100% - 1.5rem)' }}>
+            <TextField
+              value={config.table.downloadImageLabel}
+              section='table'
+              fieldName='downloadImageLabel'
+              label='Download Image Link Text'
+              placeholder={`Download ${config.type === 'map' ? 'Map' : 'Chart'} (PNG)`}
+              updateField={updateField}
+            />
+          </div>
+        </>
       )}
       <label>
         <span className='edit-label column-heading'>Table Cell Min Width</span>

package/components/EditorPanel/EditorPanel.styles.css

@@ -3,9 +3,9 @@
 
 /* Color palette in editor panel context */
 .editor-panel .header .color-palette li {
-  width: 1.5em;
-  height: 1.5em;
   display: inline-block;
+  height: 1.5em;
+  width: 1.5em;
 }
 
 .editor-panel .color-palette {
@@ -13,12 +13,12 @@
 }
 
 .editor-panel .color-palette li {
-  width: 1.5em;
-  height: 1.5em;
+  border: rgba(0, 0, 0, 0.3) 3px solid;
+  cursor: pointer;
   display: inline-block;
+  height: 1.5em;
   margin-right: 0.5em;
-  cursor: pointer;
-  border: rgba(0, 0, 0, 0.3) 3px solid;
+  width: 1.5em;
 }
 
 .editor-panel .color-palette li.active {
@@ -26,24 +26,24 @@
 }
 
 .editor-panel .color-palette a {
-  display: inline-block;
   border-bottom: 1px solid rgba(0, 0, 0, 0.8);
+  display: inline-block;
 }
 
 .editor-panel .color-palette.series-list {
+  border: none;
   flex-direction: column;
   padding: 0;
-  border: none;
 }
 
 .editor-panel .color-palette.series-list li {
-  padding: 0.3em 0.5em;
-  display: flex;
   align-items: center;
+  border: 0;
+  display: flex;
+  height: auto;
   justify-content: space-between;
+  padding: 0.3em 0.5em;
   width: auto;
-  height: auto;
-  border: 0;
 }
 
 .editor-panel .color-palette.series-list li:not(:last-child) {
@@ -61,10 +61,10 @@
 }
 
 .editor-panel .guidance-link svg {
-  width: 60px;
   color: var(--blue);
-  margin-right: 1rem;
   height: 60px;
+  margin-right: 1rem;
+  width: 60px;
 }
 
 .editor-panel .guidance-link svg path {
@@ -72,18 +72,18 @@
 }
 
 .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;
+  color: #d8000c;
+  font-size: 0.8em;
+  margin: 1em 0;
+  padding: 0.75em 1em;
 }
 
 .editor-panel .warning strong {
-  font-weight: 600;
   display: block;
+  font-weight: 600;
 }
 
 .editor-panel .advanced {
@@ -96,18 +96,18 @@
 }
 
 .editor-panel .advanced .advanced-toggle-link {
-  padding-top: 1em;
+  cursor: pointer;
   display: block;
+  padding-top: 1em;
   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;
+  text-decoration: none;
 }
 
 .editor-panel .advanced .advanced-toggle-link:hover {
@@ -115,29 +115,29 @@
 }
 
 .editor-panel .advanced textarea {
-  height: 400px;
-  width: 100%;
+  box-sizing: border-box;
+  font-family: monospace;
   font-size: 0.9em;
+  height: 400px;
   padding: 0.5em;
-  font-family: monospace;
-  box-sizing: border-box;
+  width: 100%;
 }
 
 .editor-panel .heading-2 {
   background: #565656;
+  border-bottom: #565656 3px solid;
   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;
+  text-transform: uppercase;
 }
 
 .editor-panel label:not(:first-child) {
@@ -145,8 +145,8 @@
 }
 
 .editor-panel label span.edit-label {
-  margin-bottom: 0.3em;
   display: block;
+  margin-bottom: 0.3em;
 }
 
 .editor-panel label span.column-heading {
@@ -158,25 +158,25 @@
 }
 
 .editor-panel label.checkbox span {
-  text-transform: none;
   font-size: 1em;
   font-weight: 400;
+  text-transform: none;
 }
 
 .editor-panel label.checkbox input {
-  margin-top: 0;
   margin-right: 0.5em;
+  margin-top: 0;
 }
 
 .editor-panel input[type='checkbox'],
 .editor-panel input[type='radio'] {
+  cursor: pointer;
   display: inline-block;
-  width: auto !important;
   height: auto !important;
-  padding: 0;
   margin-right: 0.5em;
-  cursor: pointer;
+  padding: 0;
   user-select: none;
+  width: auto !important;
 }
 
 .editor-panel input[type='text'],
@@ -193,8 +193,8 @@
 
 .editor-panel .primary-fieldset {
   border-top: rgba(0, 0, 0, 0.3) 2px solid;
-  padding-top: 2em;
   margin-top: 2em;
+  padding-top: 2em;
 }
 
 .editor-panel ul.column-edit {
@@ -223,28 +223,28 @@
 
 .editor-panel .edit-block {
   border: 1px solid rgba(0, 0, 0, 0.3);
-  padding: 1em;
   margin-top: 1em;
+  padding: 1em;
   position: relative;
 }
 
 .editor-panel .edit-block .remove-column {
-  position: absolute;
-  top: 0;
-  right: 0;
-  border: 0;
   background: rgba(0, 0, 0, 0.1);
+  border: 0;
   color: #000;
+  cursor: pointer;
   font-size: 0.8em;
   padding: 0.3em;
-  cursor: pointer;
+  position: absolute;
+  right: 0;
+  top: 0;
 }
 
 .editor-panel span.subtext {
-  text-transform: none;
   display: block;
   font-size: 0.8em;
   font-weight: 400;
+  text-transform: none;
 }
 
 .editor-panel .sort-list {
@@ -252,12 +252,12 @@
 }
 
 .editor-panel .sort-list li {
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  padding: 0.3em;
-  display: flex;
   align-items: center;
+  border: 1px solid rgba(0, 0, 0, 0.2);
   cursor: move;
+  display: flex;
   margin-bottom: 0.3em;
+  padding: 0.3em;
 }
 
 .editor-panel .sort-list li svg {
@@ -265,8 +265,8 @@
 }
 
 .editor-panel .info {
-  margin-top: 1em;
   font-size: 0.9em;
+  margin-top: 1em;
 }
 
 /* React Tags Component styles (third-party library) */
@@ -275,8 +275,8 @@
 }
 
 .editor-panel .react-tags {
-  position: relative;
   cursor: text;
+  position: relative;
 }
 
 .editor-panel .react-tags input.react-tags__search-input {
@@ -296,20 +296,20 @@
 }
 
 .editor-panel .react-tags__selected-tag {
-  display: inline-block;
-  box-sizing: border-box;
+  background: #f1f1f1;
   border: 1px solid #d1d1d1;
   border-radius: 2px;
-  background: #f1f1f1;
-  padding: 0.4em 0.6em;
+  box-sizing: border-box;
+  display: inline-block;
   font-size: 0.8em;
-  margin-right: 0.3em;
   margin-bottom: 0.3em;
+  margin-right: 0.3em;
+  padding: 0.4em 0.6em;
 }
 
 .editor-panel .react-tags__selected-tag:after {
-  content: '\2715';
   color: #aaa;
+  content: '\2715';
   margin-left: 8px;
 }
 
@@ -330,12 +330,12 @@
 }
 
 .editor-panel .react-tags__search input {
-  max-width: 100%;
+  font-size: inherit;
+  line-height: inherit;
   margin: 0;
+  max-width: 100%;
   outline: none;
   padding: 0.5em 0.3em;
-  font-size: inherit;
-  line-height: inherit;
 }
 
 .editor-panel .react-tags__search input::-ms-clear {
@@ -343,9 +343,9 @@
 }
 
 .editor-panel .react-tags__suggestions {
+  left: 0;
   position: absolute;
   top: 100%;
-  left: 0;
   width: 100%;
 }
 
@@ -356,13 +356,13 @@
 }
 
 .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);
+  list-style: none;
+  margin: 4px -1px;
+  padding: 0;
 }
 
 .editor-panel .react-tags__suggestions li {
@@ -371,14 +371,14 @@
 }
 
 .editor-panel .react-tags__suggestions li mark {
-  text-decoration: underline;
   background: none;
   font-weight: 600;
+  text-decoration: underline;
 }
 
 .editor-panel .react-tags__suggestions li:hover {
-  cursor: pointer;
   background: #eee;
+  cursor: pointer;
 }
 
 .editor-panel .react-tags__suggestions li.is-active {
@@ -386,23 +386,23 @@
 }
 
 .editor-panel .react-tags__suggestions li.is-disabled {
-  opacity: 0.5;
   cursor: auto;
+  opacity: 0.5;
 }
 
 .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;
+  color: white;
   cursor: pointer;
-  z-index: 9999999999;
   display: none;
+  font-size: 1em;
+  padding: 0.5em 1em;
+  position: fixed;
+  right: 1em;
+  top: 1em;
+  z-index: 9999999999;
 }
 
 .editor-toggle.active {
@@ -429,8 +429,8 @@
 }
 
 :is(span).edit-label {
-  margin-bottom: 0.3em;
   display: block;
+  margin-bottom: 0.3em;
 }
 
 .react-tooltip {