@cdc/core 4.25.10 → 4.25.11

package/components/EditorPanel/FootnotesEditor.tsx

@@ -3,8 +3,7 @@ import { UpdateFieldFunc } from '../../types/UpdateFieldFunc'
 import _ from 'lodash'
 import Footnotes, { Footnote } from '../../types/Footnotes'
 import { footnotesSymbols } from '../../helpers/footnoteSymbols'
-import InputSelect from '../inputs/InputSelect'
-import { TextField } from './Inputs'
+import { TextField, Select } from './Inputs'
 import { Datasets } from '@cdc/core/types/DataSet'
 import DataTransform from '../../helpers/DataTransform'
 import fetchRemoteData from '../../helpers/fetchRemoteData'
@@ -61,14 +60,14 @@ const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField,
     updateField('footnotes', null, 'staticFootnotes', footnoteCopy)
   }
 
-  const getOptions = (opts: string[]) => {
-    return [['', '--Select--']].concat(opts.map(key => [key, key]))
+  const getSelectOptions = (opts: string[]) => {
+    return [{ value: '', label: '--Select--' }].concat(opts.map(key => ({ value: key, label: key })))
   }
 
   const dataColumns = footnotesConfig.dataKey
-    ? getOptions(Object.keys(datasetsCache[footnotesConfig.dataKey]?.data?.[0] || {}))
+    ? getSelectOptions(Object.keys(datasetsCache[footnotesConfig.dataKey]?.data?.[0] || {}))
     : []
-  const dataSetOptions = getOptions(Object.keys(datasetsCache))
+  const dataSetOptions = getSelectOptions(Object.keys(datasetsCache))
 
   const changeFootnoteDataKey = async value => {
     if (value) {
@@ -87,7 +86,7 @@ const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField,
       {loadingAPIData && <Loader fullScreen />}
       <em>Dynamic Footnotes</em>
       <div className='row border p-2'>
-        <InputSelect
+        <Select
           label='Select a Footnote Dataset'
           value={footnotesConfig.dataKey}
           options={dataSetOptions}
@@ -100,7 +99,7 @@ const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField,
 
         {footnotesConfig.dataKey && (
           <div className='p-3'>
-            <InputSelect
+            <Select
               label='Footnote Symbol Column'
               value={footnotesConfig.dynamicFootnotes?.symbolColumn}
               options={dataColumns}
@@ -109,7 +108,7 @@ const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField,
               fieldName='symbolColumn'
               updateField={updateField}
             />
-            <InputSelect
+            <Select
               label='Footnote Text Column'
               value={footnotesConfig.dynamicFootnotes?.textColumn}
               options={dataColumns}
@@ -118,7 +117,7 @@ const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField,
               fieldName='textColumn'
               updateField={updateField}
             />
-            <InputSelect
+            <Select
               label='Footnote Order Column'
               value={footnotesConfig.dynamicFootnotes?.orderColumn}
               options={dataColumns}
@@ -135,34 +134,42 @@ const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField,
 
       <em>Static Footnotes</em>
 
-      {footnotesConfig.staticFootnotes?.map((note, index) => (
-        <div key={index} className='row border p-2'>
-          <div className='col-8'>
-            <InputSelect
-              label='Symbol'
-              value={note.symbol}
-              options={[['', '--Select--'], ...footnotesSymbols]}
-              fieldName='symbol'
-              updateField={(section, subsection, fieldName, value) =>
-                updateStaticFootnote(index, { ...note, symbol: value })
-              }
-            />{' '}
-            <TextField
-              label='Text'
-              value={note.text}
-              fieldName='text'
-              updateField={(section, subsection, fieldName, value) =>
-                updateStaticFootnote(index, { ...note, text: value })
-              }
-            />
-          </div>
-          <div className='col-2 ms-4'>
-            <button className='btn btn-danger p-1' onClick={() => deleteStaticFootnote(index)}>
-              Delete
-            </button>
+      {footnotesConfig.staticFootnotes?.map((note, index) => {
+        // Convert tuple format to {value, label} format for Select component
+        const symbolOptions = [
+          { value: '', label: '--Select--' },
+          ...footnotesSymbols.map(([value, label]) => ({ value, label }))
+        ]
+
+        return (
+          <div key={index} className='row border p-2'>
+            <div className='col-8'>
+              <Select
+                label='Symbol'
+                value={note.symbol}
+                options={symbolOptions}
+                fieldName='symbol'
+                updateField={(section, subsection, fieldName, value) =>
+                  updateStaticFootnote(index, { ...note, symbol: value })
+                }
+              />{' '}
+              <TextField
+                label='Text'
+                value={note.text}
+                fieldName='text'
+                updateField={(section, subsection, fieldName, value) =>
+                  updateStaticFootnote(index, { ...note, text: value })
+                }
+              />
+            </div>
+            <div className='col-2 ms-4'>
+              <button className='btn btn-danger p-1' onClick={() => deleteStaticFootnote(index)}>
+                Delete
+              </button>
+            </div>
           </div>
-        </div>
-      ))}
+        )
+      })}
       <button className='btn btn-primary' onClick={addStaticFootnote}>
         Add Static Footnote
       </button>

package/components/EditorPanel/Inputs.tsx

@@ -149,6 +149,7 @@ export type SelectProps = {
   options?: string[] | { label: string; value: string }[]
   required?: boolean
   initial?: string
+  disabled?: boolean
 
   // all other props
   [x: string]: any
@@ -167,6 +168,8 @@ const Select = memo((props: SelectProps) => {
     tooltip,
     updateField,
     initial: initialValue,
+    disabled = false,
+    onChange: onChangeProp,
     ...attributes
   } = props
   const optionsJsx = options?.map((option, index) => {
@@ -197,7 +200,7 @@ const Select = memo((props: SelectProps) => {
   }
 
   return (
-    <label>
+    <label style={disabled ? { opacity: 0.6, pointerEvents: 'none' } : {}}>
       <span className='edit-label'>
         {label}
         {tooltip}
@@ -206,9 +209,16 @@ const Select = memo((props: SelectProps) => {
         className={`cove-form-select ${required && !value ? 'warning' : ''} ${DROPDOWN_STYLES}`}
         name={fieldName}
         value={value}
+        disabled={disabled}
         onChange={event => {
-          updateField(section, subsection, fieldName, event.target.value)
+          if (updateField) {
+            updateField(section, subsection, fieldName, event.target.value)
+          }
+          if (onChangeProp) {
+            onChangeProp(event)
+          }
         }}
+        style={disabled ? { cursor: 'not-allowed', backgroundColor: '#e9ecef' } : {}}
         {...attributes}
       >
         {optionsJsx}

package/components/EditorPanel/VizFilterEditor/NestedDropdownEditor.tsx

@@ -5,6 +5,7 @@ import { filterOrderOptions } from '../../../helpers/filterOrderOptions'
 import FilterOrder from './components/FilterOrder'
 import { Visualization } from '../../../types/Visualization'
 import { useMemo } from 'react'
+import { Select } from '../Inputs'
 
 type NestedDropdownEditorProps = {
   config: Visualization
@@ -155,43 +156,26 @@ const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
         />
       </label>
 
-      <label>
-        <div className='edit-label column-heading mt-2'>
-          Filter Grouping
-          <span></span>
-        </div>
-        <select value={filter.columnName} onChange={e => handleGroupColumnNameChange(e.target.value)}>
-          <option value=''>- Select Option -</option>
-          {columnNameOptions.map((option, index) => (
-            <option value={option} key={index}>
-              {option}
-            </option>
-          ))}
-        </select>
-      </label>
-      <label>
-        <div className='edit-label column-heading mt-2'>
-          Filter SubGrouping
-          <span></span>
-        </div>
-        <select
-          value={subGrouping?.columnName ?? ''}
-          onChange={e => {
-            handleSubGroupColumnNameChange(e.target.value)
-          }}
-        >
-          <option value=''>- Select Option -</option>
-          {columnNameOptions.map((option, index) => {
-            if (option !== filter.columnName) {
-              return (
-                <option value={option} key={index}>
-                  {option}
-                </option>
-              )
-            }
-          })}
-        </select>
-      </label>
+      <Select
+        label='Filter Grouping'
+        value={filter.columnName}
+        options={[{ value: '', label: '- Select Option -' }, ...columnNameOptions.map(opt => ({ value: opt, label: opt }))]}
+        onChange={e => handleGroupColumnNameChange(e.target.value)}
+      />
+
+      <Select
+        label='Filter SubGrouping'
+        value={subGrouping?.columnName ?? ''}
+        options={[
+          { value: '', label: '- Select Option -' },
+          ...columnNameOptions
+            .filter(option => option !== filter.columnName)
+            .map(opt => ({ value: opt, label: opt }))
+        ]}
+        onChange={e => {
+          handleSubGroupColumnNameChange(e.target.value)
+        }}
+      />
 
       <label>
         <input
@@ -229,39 +213,28 @@ const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
         )}
       </label>
 
-      <label className='mt-2'>
+      <div className='mt-2'>
         <div className='edit-label column-heading float-right'>{filter.columnName} </div>
-        <span className={'edit-filterOrder column-heading '}>Group Order</span>
-        <select value={filter.order} onChange={e => handleGroupingOrderBy(e.target.value as OrderBy)}>
-          {filterOrderOptions.map((option, index) => {
-            return (
-              <option value={option.value} key={`filter-${option.label}-${index}`}>
-                {option.label}
-              </option>
-            )
-          })}
-        </select>
+        <Select
+          label='Group Order'
+          value={filter.order}
+          options={filterOrderOptions}
+          onChange={e => handleGroupingOrderBy(e.target.value as OrderBy)}
+        />
         {filter.order === 'cust' && (
           <FilterOrder orderedValues={filter.orderedValues} handleFilterOrder={handleGroupingCustomOrder} />
         )}
-      </label>
+      </div>
 
       {subGrouping?.columnName && (
-        <label className='mt-2'>
-          <span className={'edit-filterOrder column-heading'}>SubGrouping Order</span>
+        <div className='mt-2'>
           <div className='edit-label column-heading float-right'>{subGrouping.columnName} </div>
-          <select
+          <Select
+            label='SubGrouping Order'
             value={subGrouping.order ? subGrouping.order : 'asc'}
+            options={filterOrderOptions}
             onChange={e => handleSubGroupingOrderBy(e.target.value as OrderBy)}
-          >
-            {filterOrderOptions.map((option, index) => {
-              return (
-                <option value={option.value} key={`filter-${index}`}>
-                  {option.label}
-                </option>
-              )
-            })}
-          </select>
+          />
           {subGrouping?.order === 'cust' &&
             filter.values.map((groupName, i) => {
               const orderedSubGroupValues = subGrouping.valuesLookup[groupName].orderedValues
@@ -278,7 +251,7 @@ const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
                 </div>
               )
             })}
-        </label>
+        </div>
       )}
     </div>
   )

package/components/EditorPanel/VizFilterEditor/VizFilterEditor.tsx

@@ -28,6 +28,16 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
     return _.uniq(_.flatten(rawData?.map(row => Object.keys(row))))
   }, [rawData])
 
+  // Helper function to get filter values from various sources
+  const getFilterValues = (filter: VizFilter) => {
+    if (filter.values && filter.values.length > 0) return filter.values
+    if (filter.orderedValues && filter.orderedValues.length > 0) return filter.orderedValues
+    if (filter.columnName && rawData && rawData.length > 0) {
+      return _.uniq(rawData.map(row => row[filter.columnName]))
+    }
+    return []
+  }
+
   const removeFilter = index => {
     let filters = _.cloneDeep(config.filters)
 
@@ -188,8 +198,8 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                           value={filter.defaultValue}
                           options={
                             filter.resetLabel
-                              ? [filter.resetLabel, ...config.filters?.[filterIndex].values]
-                              : config.filters?.[filterIndex].values
+                              ? [filter.resetLabel, ...getFilterValues(filter)]
+                              : getFilterValues(filter)
                           }
                           updateField={(_section, _subSection, _key, value) => {
                             updateFilterDefaultValue(filterIndex, value)

package/components/EditorPanel/components/MarkupVariablesEditor.tsx

@@ -1,15 +1,21 @@
-import React, { useState, useMemo } from 'react'
+import React, { useState, useMemo, useCallback } from 'react'
 import { MarkupVariable, MarkupCondition } from '../../../types/MarkupVariable'
 import Button from '../../elements/Button'
 import { TextField, Select, CheckBox } from '../Inputs'
 import Icon from '../../ui/Icon'
 import Accordion from '../../ui/Accordion'
+import { Datasets } from '../../../types/DataSet'
+import _ from 'lodash'
 
 type MarkupVariablesEditorProps = {
   /** Array of markup variable configurations */
   markupVariables: MarkupVariable[]
-  /** Dataset to extract column names and values from */
-  data: any[]
+  /** Dataset to extract column names and values from (for backward compatibility) */
+  data?: any[]
+  /** Available datasets for multi-dataset support */
+  datasets?: Datasets
+  /** Configuration object containing dataKey for dataset assignment */
+  config?: { dataKey?: string }
   /** Callback when variables are added, updated, or removed */
   onChange: (variables: MarkupVariable[]) => void
   /** Whether markup variables feature is enabled */
@@ -27,6 +33,8 @@ export type { MarkupVariablesEditorProps }
 const MarkupVariablesEditor: React.FC<MarkupVariablesEditorProps> = ({
   markupVariables = [],
   data = [],
+  datasets,
+  config,
   onChange,
   enableMarkupVariables = false,
   onToggleEnable
@@ -34,9 +42,46 @@ const MarkupVariablesEditor: React.FC<MarkupVariablesEditorProps> = ({
   const [editingIndex, setEditingIndex] = useState<number | null>(null)
   const [validationErrors, setValidationErrors] = useState<Record<number, string[]>>({})
 
-  // Ensure we always have a valid array
-  const safeMarkupVariables = markupVariables || []
-  const availableColumns = data.length > 0 ? Object.keys(data[0]) : []
+  // Ensure we always have a valid array (memoized with deep equality to prevent unnecessary re-renders)
+  const safeMarkupVariables = useMemo(() => markupVariables || [], [JSON.stringify(markupVariables)])
+
+  // Get the target dataset with fallback logic (memoized for performance)
+  const getTargetData = useCallback((): any[] => {
+    // First try to use the data prop
+    if (data && data.length > 0) {
+      return data
+    }
+
+    // Fallback to assigned dataset using config.dataKey
+    if (datasets && config?.dataKey) {
+      const assignedDataset = datasets[config.dataKey]
+      if (assignedDataset?.data?.length > 0) {
+        return assignedDataset.data
+      }
+    }
+
+    return []
+  }, [data, datasets, config?.dataKey])
+
+  // Get columns from the available data (memoized for performance)
+  const getAvailableColumns = useMemo((): string[] => {
+    const targetData = getTargetData()
+    return targetData.length > 0 ? Object.keys(targetData[0]) : []
+  }, [getTargetData])
+
+  // Get column values for a specific column (memoized for performance)
+  const getColumnValues = useCallback((columnName: string): string[] => {
+    const targetData = getTargetData()
+    if (targetData.length === 0) return []
+
+    const uniqueValues = new Set<string>()
+    targetData.forEach(row => {
+      if (row[columnName] !== undefined && row[columnName] !== null) {
+        uniqueValues.add(String(row[columnName]))
+      }
+    })
+    return Array.from(uniqueValues).sort()
+  }, [data, datasets, config?.dataKey])
 
   // Validate a variable and return array of error messages
   const validateVariable = React.useCallback((variable: MarkupVariable): string[] => {
@@ -71,7 +116,12 @@ const MarkupVariablesEditor: React.FC<MarkupVariablesEditorProps> = ({
         errors[index] = variableErrors
       }
     })
-    setValidationErrors(errors)
+
+    // Only update if errors have actually changed (use deep equality)
+    setValidationErrors(prev => {
+      const errorsChanged = !_.isEqual(prev, errors)
+      return errorsChanged ? errors : prev
+    })
   }, [safeMarkupVariables, validateVariable]) // Re-validate when variables change
 
 
@@ -125,18 +175,7 @@ const MarkupVariablesEditor: React.FC<MarkupVariablesEditorProps> = ({
     return `{{${name.toLowerCase().replace(/[^a-z0-9]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '')}}}`
   }
 
-  // Get unique values for a given column for condition dropdowns
-  const getColumnValues = useMemo(() => {
-    if (!data || data.length === 0) return {}
 
-    const columnValues: Record<string, (string | number)[]> = {}
-    availableColumns.forEach(column => {
-      const uniqueValues = Array.from(new Set(data.map(row => row[column])))
-        .filter(val => val !== null && val !== undefined && val !== '')
-      columnValues[column] = uniqueValues
-    })
-    return columnValues
-  }, [data, availableColumns])
 
   const addCondition = (variableIndex: number) => {
     const variable = safeMarkupVariables[variableIndex]
@@ -265,7 +304,7 @@ const MarkupVariablesEditor: React.FC<MarkupVariablesEditorProps> = ({
                               label='Data Column'
                               options={[
                                 { value: '', label: 'Select Column...' },
-                                ...availableColumns.map(col => ({ value: col, label: col }))
+                                ...getAvailableColumns.map(col => ({ value: col, label: col }))
                               ]}
                               updateField={(_section, _subsection, _fieldName, value) => {
                                 updateVariable(index, { columnName: value })
@@ -290,7 +329,7 @@ const MarkupVariablesEditor: React.FC<MarkupVariablesEditorProps> = ({
                                       label='Column'
                                       options={[
                                         { value: '', label: 'Select Column...' },
-                                        ...availableColumns.map(col => ({ value: col, label: col }))
+                                        ...getAvailableColumns.map(col => ({ value: col, label: col }))
                                       ]}
                                       updateField={(_section, _subsection, _fieldName, newColumnName) => {
                                         // Reset value when column changes
@@ -322,8 +361,8 @@ const MarkupVariablesEditor: React.FC<MarkupVariablesEditorProps> = ({
                                       label='Value'
                                       options={[
                                         { value: '', label: 'Select Value...' },
-                                        ...(condition.columnName && getColumnValues[condition.columnName]
-                                          ? getColumnValues[condition.columnName].map(val => ({
+                                        ...(condition.columnName
+                                          ? getColumnValues(condition.columnName).map(val => ({
                                             value: String(val),
                                             label: String(val)
                                           }))

package/components/Filters/Filters.tsx

@@ -141,10 +141,31 @@ const Filters: React.FC<FilterProps> = ({
         filter.values = getUniqueValues(visualizationConfig.data, filter.columnName)
       }
 
-      newFilters[i].active = handleSorting(filter).values[0]
+      // Determine reset value based on filter configuration
+      let resetValue
 
-      if (filter.setByQueryParameter && queryParams[filter.setByQueryParameter] !== filter.active) {
-        queryParams[filter.setByQueryParameter] = filter.active
+      // If filter has a resetLabel, reset to empty state (shows "- Select -")
+      if (filter.resetLabel) {
+        resetValue = filter.resetLabel
+      }
+      // If filter has a defaultValue, use that
+      else if (filter.defaultValue) {
+        resetValue = filter.defaultValue
+      }
+      // Otherwise, use first value in sorted values array
+      else if (filter.values && filter.values.length > 0) {
+        resetValue = handleSorting(filter).values[0]
+      }
+
+      // Handle multi-select filters
+      if (filter.filterStyle === 'multi-select') {
+        newFilters[i].active = resetValue ? [resetValue] : []
+      } else {
+        newFilters[i].active = resetValue
+      }
+
+      if (filter.setByQueryParameter && queryParams[filter.setByQueryParameter] !== newFilters[i].active) {
+        queryParams[filter.setByQueryParameter] = newFilters[i].active
         needsQueryUpdate = true
       }
     })
@@ -295,9 +316,9 @@ const Filters: React.FC<FilterProps> = ({
               >
                 Apply
               </Button>
-              <Button secondary disabled={initialFiltersActive} onClick={handleFiltersReset}>
+              <button className='btn btn-link' disabled={initialFiltersActive} onClick={handleFiltersReset}>
                 Clear Filters
-              </Button>
+              </button>
             </div>
           ) : (
             <></>

package/components/Filters/components/Dropdown.tsx

@@ -10,7 +10,7 @@ type DropdownProps = {
 }
 
 const Dropdown: React.FC<DropdownProps> = ({ index: outerIndex, label, filter, changeFilterActive }) => {
-  const { active, queuedActive } = filter
+  const { active, queuedActive, resetLabel } = filter
 
   return (
     <select
@@ -25,6 +25,11 @@ const Dropdown: React.FC<DropdownProps> = ({ index: outerIndex, label, filter, c
         changeFilterActive(outerIndex, e.target.value)
       }}
     >
+      {resetLabel && (
+        <option key='reset-option' value={resetLabel} aria-label={resetLabel}>
+          {resetLabel}
+        </option>
+      )}
       {filter.values?.map((value, index) => {
         return (
           <option key={index} value={value} aria-label={value}>

package/components/Footnotes/Footnotes.tsx

@@ -1,25 +1,35 @@
-import { Footnote } from '../../types/Footnotes'
-import './footnotes.css'
-
-type FootnotesProps = {
-  footnotes: Footnote[]
-}
-
-const Footnotes: React.FC<FootnotesProps> = ({ footnotes }) => {
-  return (
-    <footer className='col-12 m-3 mt-1 mb-0'>
-      <ul className='cove-footnotes'>
-        {footnotes.map((note, i) => {
-          return (
-            <li key={`${note.symbol || 'footnote-'}${i}`} className='mb-1'>
-              {note.symbol && <span className='me-1'>{note.symbol}</span>}
-              {note.text}
-            </li>
-          )
-        })}
-      </ul>
-    </footer>
-  )
-}
-
-export default Footnotes
+import { Footnote } from '../../types/Footnotes'
+import parse from 'html-react-parser'
+import './footnotes.css'
+
+type FootnotesProps = {
+  footnotes: Footnote[]
+}
+
+const Footnotes: React.FC<FootnotesProps> = ({ footnotes }) => {
+  // Convert newlines to <br> tags and parse HTML
+  const processFootnoteText = (text: string) => {
+    if (!text) return ''
+    // Convert newline characters to <br> tags
+    const textWithBreaks = text.replace(/\n/g, '<br>')
+    // Parse HTML (html-react-parser handles sanitization)
+    return parse(textWithBreaks)
+  }
+
+  return (
+    <footer className='col-12 m-3 mt-1 mb-0'>
+      <ul className='cove-footnotes'>
+        {footnotes.map((note, i) => {
+          return (
+            <li key={`${note.symbol || 'footnote-'}${i}`} className='mb-1'>
+              {note.symbol && <span className='me-1'>{note.symbol}</span>}
+              {processFootnoteText(note.text)}
+            </li>
+          )
+        })}
+      </ul>
+    </footer>
+  )
+}
+
+export default Footnotes