@cdc/core 4.26.1 → 4.26.3

package/components/EditorPanel/ColumnsEditor.tsx

@@ -10,21 +10,23 @@ import FieldSetWrapper from './FieldSetWrapper'
 import { useDataColumns } from '../../hooks/useDataColumns'
 import Alert from '../Alert/components/Alert'
 
-interface ColumnsEditorProps {
-  config: Partial<Visualization>
-  updateField: UpdateFieldFunc<string | boolean | string[] | number | Column | Record<string, Partial<Column>>>
-  deleteColumn: (colName: string) => void
-}
+interface ColumnsEditorProps {
+  config: Partial<Visualization>
+  updateField: UpdateFieldFunc<string | boolean | string[] | number | Column | Record<string, Partial<Column>>>
+  deleteColumn: (colName: string) => void
+  hiddenColumnNames?: string[]
+}
 
 type OpenControls = [Record<string, boolean>, Function] // useState type
 
-const FieldSet: React.FC<ColumnsEditorProps & { colKey: string; controls: OpenControls }> = ({
-  config,
-  deleteColumn,
-  updateField,
-  colKey,
-  controls
-}) => {
+const FieldSet: React.FC<ColumnsEditorProps & { colKey: string; controls: OpenControls }> = ({
+  config,
+  deleteColumn,
+  updateField,
+  hiddenColumnNames = [],
+  colKey,
+  controls
+}) => {
   const [openControls, setOpenControls] = controls
 
   const editColumn = (key, value) => {
@@ -58,17 +60,18 @@ const FieldSet: React.FC<ColumnsEditorProps & { colKey: string; controls: OpenCo
   const allColumns = useDataColumns(config.data)
 
   // Filter out groupBy and already configured columns
-  const availableColumns = useMemo(() => {
-    const configuredColumns = Object.values(config.columns).map(col => col.name)
-    const cols = allColumns.filter(key => {
-      if (config.table.groupBy === key) return false
-      if (configuredColumns.includes(key)) return false
-      return true
-    })
-    // Add current column name if it exists
-    if (config.columns[colKey]?.name) cols.push(config.columns[colKey].name)
-    return cols
-  }, [allColumns, config.table.groupBy, config.columns, colKey])
+  const availableColumns = useMemo(() => {
+    const configuredColumns = Object.values(config.columns).map(col => col.name)
+    const cols = allColumns.filter(key => {
+      if (config.table.groupBy === key) return false
+      if (configuredColumns.includes(key)) return false
+      if (hiddenColumnNames.includes(key)) return false
+      return true
+    })
+    // Add current column name if it exists
+    if (config.columns[colKey]?.name) cols.push(config.columns[colKey].name)
+    return cols
+  }, [allColumns, config.table.groupBy, config.columns, colKey, hiddenColumnNames])
 
   const colName = config.columns[colKey]?.name
 
@@ -264,9 +267,12 @@ const FieldSet: React.FC<ColumnsEditorProps & { colKey: string; controls: OpenCo
   )
 }
 
-const ColumnsEditor: React.FC<ColumnsEditorProps> = ({ config, updateField, deleteColumn }) => {
-  const openControls = useState({})
-  const additionalColumns = Object.keys(config.columns)
+const ColumnsEditor: React.FC<ColumnsEditorProps> = ({ config, updateField, deleteColumn, hiddenColumnNames = [] }) => {
+  const openControls = useState({})
+  const additionalColumns = Object.keys(config.columns).filter(colKey => {
+    const columnName = config.columns[colKey]?.name || colKey
+    return !hiddenColumnNames.includes(columnName)
+  })
 
   // just adds a new column but not set to any data yet
   const addColumnConfig = number => {
@@ -312,11 +318,12 @@ const ColumnsEditor: React.FC<ColumnsEditorProps> = ({ config, updateField, dele
               key={val + i}
               controls={openControls}
               config={config}
-              deleteColumn={deleteColumn}
-              updateField={updateField}
-              colKey={val}
-            />
-          ))}
+              deleteColumn={deleteColumn}
+              updateField={updateField}
+              hiddenColumnNames={hiddenColumnNames}
+              colKey={val}
+            />
+          ))}
           <button
             className={'btn btn-primary'}
             onClick={event => {

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>